Angular2 -- SystemJS解析

文 | Yeaseon

SystemJS

SystemJS是一个通用的动态模块加载器，Angular2就是通过SystemJS加载所需的模块。

SystemJS 配置函数

通过System.config函数进行配置：

System.config({
    configA: {},
    configB: 'value'
});

SystemJS 可配置项

• babelOptions
• bundle
• defaultJSExtensions
• depCache
• map
• meta
• packages
• paths
• traceurOptions
• transpiler
• typescriptOptions

在Angular2的‘英雄联盟’教程中，我们的systemjs.config.js脚本中只配置了map和packages两项，其他配置选项详情。

map

map tells the System loader where to look for things

以下是Angular2中的配置：

var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

packages

packages tells the System loader how to load when no filename and/or no extension

以下是Angular2中的配置：

var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };

• main: package的主要入口
• defaultExtension：默认扩展名

然后完成对于SystemJS的配置：

var config = {
    map: map,
    packages: packages
  };
System.config(config);

System.import告诉SystemJS引入main文件，main文件是Angular启动应用的地方。
在根目录index.html

<script>
      System.import('app')
             .catch(function(err){ 
                console.error(err); 
             });
</script>

并没有看到main相关的字眼，只有一个app被引入，这就要回到我们上面提到的packages配置项，SystemJS会自动寻找./app/main.js，这样我们的应用就可以在main中启动了。