文 | 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中启动了。
