वेबपैक + सिस्टमजेएस - जावास्क्रिप्ट फ़ाइल कैसे जोड़ें?

Question

मैं अपनी परियोजना में /assets/js/clusterfeaturelayer.js नामक एक फ़ाइल शामिल करना चाहता हूं, जिसमें मैं सिस्टमजेएस और वेबपैक का उपयोग करता हूं और जिसमें निम्न संरचना है।

• /एप्लिकेशन < - कोणीय एप्लिकेशन कोड
• /< node_modules - NPM संकुल
• /आस्तियों/जे एस < - अन्य तीसरे पक्ष के पुस्तकालयों कि NPM

का इन नहीं हैं फ़ाइल को एएमडी शैली में परिभाषित किया गया है और इस तरह दिखता है:

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 कॉन्फ़िगरेशन में इस फ़ाइल को शामिल करने का प्रयास के आधार पर अपने कोड के भीतर से है कि घटक का उपयोग करना चाहते है, यह सिर्फ यह नहीं मिल रहा है:

यहाँ मेरी systemjs 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

आप अपने clusterlayerfeature फ़ाइल में एक निर्यात है:

(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 config है?

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

यदि आप अपना मॉड्यूल निर्यात नहीं कर रहे हैं, तो इसका कोई भी संदर्भ अपरिभाषित होगा।