WebPack + SystemJS - 如何添加一个 JavaScript 文件？

Question

WebPack + SystemJS - 如何添加一个 JavaScript 文件？

9

我希望将一个名为/assets/js/clusterfeaturelayer.js的文件包含到我的项目中，该项目使用SystemJS和WebPack，并具有以下结构。

/app <-- Angular 应用程序代码
/node_modules <-- npm 包
/assets/js <-- 其他不在 NPM 中的第三方库

该文件采用 AMD 风格定义，如下所示：

define([
  'dojo/_base/declare',
  'dojo/_base/array',
  'dojo/_base/lang',  
  'esri/SpatialReference',
  'esri/geometry/Point',
  'esri/geometry/Polygon',
  'esri/geometry/Multipoint',
  'esri/geometry/Extent',
  'esri/graphic',

], function (declare, arrayUtils, lang, SpatialReference, Point, Polygon, Multipoint, Extent, Graphic) 
{

});

我希望能够通过import ClusterFeatureLayer = require("ClusterFeatureLayer");在我的代码中使用该组件。

但是无论我如何尝试在我的systemjs和webpack配置文件中包含这个文件，它都无法找到：

以下是我的systemjs配置：

(function(global) {

  // map tells the System loader where to look for things.
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'ClusterFeatureLayer':        'assets/js'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'boot.js',  defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: './index.js',defaultExtension:'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'esri':                       { defaultExtension: 'js' },
    'ClusterFeatureLayer':        { main: 'clusterfeaturelayer.js', defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router'
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  }
  System.config(config);

})(this);

以下是webpack配置文件：

var webpack = require("webpack");

module.exports = {
    entry: {
        main: [
            './app/boot.ts' // entry point for your application code
        ],
        vendor: [
            // put your third party libs here
            "core-js",
            "reflect-metadata", // order is important here
            "rxjs",
            "zone.js",
            '@angular/core',
            '@angular/common',
            "@angular/compiler",
            "@angular/core",
            "@angular/forms",
            "@angular/http",
            "@angular/platform-browser",
            "@angular/platform-browser-dynamic",
            "@angular/router",
            "@angular/upgrade",
            "ng2-slim-loading-bar",
            "ng2-toasty",              
            "ClusterFeatureLayer"
]
    },
    output: {
        filename: './dist/[name].bundle.js',
        publicPath: './',
        libraryTarget: "amd"
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: ''
            },
            // css
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity
        })
    ],
    externals: [
        function(context, request, callback) {
            if (/^dojo/.test(request) ||
                /^dojox/.test(request) ||
                /^dijit/.test(request) ||
                /^esri/.test(request)
            ) {
                return callback(null, "amd " + request);
            }
            callback();
        }
    ],
    devtool: 'source-map'
};

- netik

1

这怎么会这么难呢？我在我的项目中需要一个非常类似的东西 :( - user66875

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- opticon · Accepted Answer

你的 clusterlayerfeature 文件中是否有导出功能？

// My Module
var myModule = {
    myFunction: function() {
        return "Hello!";
    }
}
module.exports = myModule;

如果您没有导出模块，对它的任何引用都将是未定义的。