WebPack + SystemJS - Wie füge ich eine JavaScript-Datei hinzu?

Question

Ich möchte eine Datei namens /assets/js/clusterfeaturelayer.js zu meinem Projekt hinzufügen, in dem ich SystemJS und WebPack verwende und die folgende Struktur hat.

• /app < - Winkel App-Code
• /node_modules < - npm Pakete
• /assets/js < - andere Bibliotheken von Drittanbietern, die

Die nicht in NPM sind Datei ist in einem AMD-Stil definiert und sieht so aus:

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) 
{ 

}); 

ich woou ld mag diese Komponente verwenden, aus meinem Code von import ClusterFeatureLayer = require("ClusterFeatureLayer");

aber egal wie ich versuche, in meinem systemjs und webpack configs diese Datei zu schließen, es findet einfach nicht:

Hier ist meine systemjs Config :

(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); 

und hier ist die webpack config:

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

haben Sie einen Export in Ihrer clusterlayerfeature Datei haben?

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

Wenn Sie Ihr Modul nicht exportieren, ist jeglicher Verweis darauf nicht definiert.