Question

所以我试图将ImmutableJs导入我的angular 2项目，我正在使用这种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);

但是当我尝试

时，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文件不会影响import语句 - 它控制如何为最终用户解析文件。因此，第一个import语句中的 from 位置是正确的，虽然“immutable”本身也可以，因为加载器将自行解析路径（我不完全确定但是，这个过程的具体细节。

但是，您无法以这种方式导入整个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' }
};

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

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

1 个答案: