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

Question

我想在我的项目中包含一个名为 /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'
};

Answer 1

您的 clusterlayerfeature 文件中是否有导出？

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

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