如何为 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.js 所在的 immutable/dist 目录）。在网上搜索我找不到答案，但我发现有些人在问类似的问题，但过去 6 个月都没有得到回答。如果只是指向可以详细解释什么是什么的来源，我们将不胜感激

Answer 1

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

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

将通配符模块导入为名为 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' }
};

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

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

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

systemjs

immutable.js

angular