如何为 ImmutableJs 配置 SystemJs 以在 Angular 2 项目中工作

Question

所以我正在尝试将 ImmutableJs 导入到我的 angular 2 项目中，我正在使用这种 systemjs 配置

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

但是当我尝试时它 VS Code 并没有捡起它

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

我知道 immutable.d.ts 不是模块。

import { Immutable } from 'immutable/immutable';

只是删除找不到模块（尽管这应该可以工作，因为我将 immutable 映射到 immutable.js 所在的 immutable/dist 目录）。在网上搜索我找不到答案，但我发现有些人问了过去 6 个月没有回答的类似问题。如果只是指向可以详细解释是什么的来源，我们将不胜感激。

Answer 1

system.config.js 文件不影响导入语句——它控制如何为最终用户解析文件。因此，您的第一个导入语句中的 from 位置是正确的，尽管“不可变”本身也可以，因为加载器将自行解析路径（我不确定然而，这个过程的细节）。

但是，您不能以这种方式导入整个 Immutable 模块，因为在 immutable.d.ts 中永远不会导出任何名为“Immutable”的内容。你有两个选择：

导入一个通配符模块作为一个名为 Immutable 的变量：

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

导入单个模块：

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

你仍然需要像这样为前端配置 system.config.js：

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

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

告诉浏览器在哪里可以找到上面使用的导出。