文 | 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中啟動了。