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

问题描述

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

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

但是我尝试时VS Code不会将其拾取

but it VS Code doesnt pick it up when i try

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

我得到了immutable.d.ts不是一个模块.

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

import { Immutable } from 'immutable/immutable';

只是掉落找不到模块(尽管这应该工作，因为我将不可变映射到immutable.js所在的不可变/dist目录).在网上搜索时，我找不到答案，但是我发现有些人在问过去6个月未回答的类似问题.如果仅能指导可以详细解释什么是什么的信息源，任何帮助将不胜感激

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

推荐答案

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

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

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

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:

将通配符模块作为名为Immutable的变量导入:

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 {Map} from 'immutable';
...
//in your code later:
Map({a:1, b:2, c:3})

您仍然需要像这样配置前端的system.config.js:

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.

这篇关于如何配置SystemJs以使ImmutableJs在Angular 2项目中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！