文 | Yeaseon
SystemJS
SystemJS是一個通用的動態(tài)模塊加載器墨吓，Angular2就是通過SystemJS加載所需的模塊骡男。
SystemJS 配置函數(shù)
通過System.config函數(shù)進行配置：
System.config({
configA: {},
configB: 'value'
});
SystemJS 可配置項
- babelOptions
- bundle
- defaultJSExtensions
- depCache
- map
- meta
- packages
- paths
- traceurOptions
- transpiler
- typescriptOptions
在Angular2的‘英雄聯(lián)盟’教程中芭析，我們的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啟動應(yīng)用的地方丽已。
在根目錄index.html
<script>
System.import('app')
.catch(function(err){
console.error(err);
});
</script>
并沒有看到main相關(guān)的字眼蚌堵，只有一個app被引入，這就要回到我們上面提到的packages配置項，SystemJS會自動尋找./app/main.js吼畏，這樣我們的應(yīng)用就可以在main中啟動了督赤。
