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

Question

我想在我的項目中包含一個名爲/assets/js/clusterfeaturelayer.js的文件，其中使用了SystemJS和WebPack，它具有以下結構。

• /應用< - 角應用程序代碼
• /node_modules < - NPM包
• /資產/ 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) 
{ 

}); 

我wou LD喜歡通過import ClusterFeatureLayer = require("ClusterFeatureLayer");

但無論我如何努力，包括在我的systemjs和的WebPack CONFIGS此文件來使用該組件從我的代碼中，它只是沒有找到它：

這裏是我的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; 

如果你不導出你的模塊，任何對它的引用都是未定義的。