How to configure SystemJs for ImmutableJs to work in Angular 2 project

问题

so i am trying to import ImmutableJs into my angular 2 project, i am using this kind of systemjs config

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'src/client':                 'src/client', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'highcharts':                 'node_modules/highcharts',
    'angular2-highcharts':        'node_modules/angular2-highcharts',
    'immutable':                  'node_modules/immutable/dist'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'src/client':                 { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'highcharts':                 { defaultExtension: 'js' },
    'angular2-highcharts':        { main: 'index.js', defaultExtension: 'js' },
    'immutable':                  { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

but it VS Code doesnt pick it up when i try

import { Immutable } from 'immutable/dist/immutable';

i get that immutable.d.ts is not a module.

import { Immutable } from 'immutable/immutable';

just drops cant find module (though this should work since i mapped immutable to immutable/dist directory where immutable.js resides). Searching around the net i couldnt find an answer tho i found some people asking similar questions that werent answered for last 6 months. Any help is appreciated if only just directing to a source that could explain in details whats what

回答1:

The system.config.js file doesn't affect the import statements--it controls how files are resolved for the end user. As such, the from location in your first import statement is correct, though "immutable" by itself would also be fine, as the loader will resolve the path by itself (I'm not exactly sure of the specifics of this process, however).

However, you can't import the entire Immutable module in this way, since nothing called "Immutable" is never exported in immutable.d.ts. You have 2 options:

Import a wildcard module as a variable called Immutable:

import * as Immutable from 'immutable';
...
//in your code later:
Immutable.Map({a:1, b:2, c:3})

Import a individual modules:

import {Map} from 'immutable';
...
//in your code later:
Map({a:1, b:2, c:3})

You still need to configure system.config.js for the front end like so:

var map = {
    ...
    'immutable':                  'node_modules/immutable/dist'
};

var packages = {
    ...
    'immutable':                  { main: 'immutable.js', defaultExtension: 'js' }
};

that tells the browser where to find the exports used above.

来源：https://stackoverflow.com/questions/38352736/how-to-configure-systemjs-for-immutablejs-to-work-in-angular-2-project

标签

angular

systemjs

immutable.js