WebPack + SystemJS - How to add a JavaScript file?

Question

I want to include a file called /assets/js/clusterfeaturelayer.js to my project, in which I use SystemJS and WebPack and which has the following structure.

• /app <-- angular app code
• /node_modules <-- npm packages
• /assets/js <-- other third party libraries that are not in NPM

The file is defined in a AMD style and looks like this:

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

});

I would like to use that component from within my code by import ClusterFeatureLayer = require("ClusterFeatureLayer");

But no matter how I try to include this file in my systemjs and webpack configs, it just doesn't find it:

Here is my 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);

and here is the 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

Do you have an export in your clusterlayerfeature file?

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

If you aren't exporting your module, any reference to it will be undefined.