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