全部模块相对于这个URL加载除非模块名是个绝对或相对URL
System.config({ baseURL: '/app' });
System.import('es6module.js'); // GET /app/es6module.js
System.import('./es6module.js'); // GET /es6module.js
System.import('http://example.com/es6module.js'); // GET http://example.com/es6module.js
git
若是defaultJSExtensions为true
若是defaultJSExtensions为true,.js 扩展名会自动的添加到全部文件的路径。若是一个模块名已经有了超过.js扩展名(好比ts),.js仍是会被添加上去:
System.config({ defaultJSExtensions: true });
System.import('./es6module'); // GET /es6module.js
System.import('./es6module.js'); // GET /es6module.js
System.import('./es6module.ts'); // GET /es6module.ts.js
es6
** 警告:defaultJSExtensions会向后兼容,未来会被废弃 **github
map选项容许你为模块名建立一个别名,当你引入一个模块,模块名会被相应的值替换,除非原始模块名是任何路径(绝对或相对)。map参数应用在 baseURL 以前:typescript
System.config({ map: { 'es6module.js': 'esSixModule.js' } });
System.import('es6module.js'); // GET /esSixModule.js
System.import('./es6module.js'); // GET /es6Module.js
这里是另一个例子:
System.config({
baseURL: '/app',
map: { 'es6module': 'esSixModule.js' }
});
System.import('es6module'); // GET /app/esSixModule.js
babel
packages提供了一个设置metadata 和 映射配置(特指公共路径的便捷方式)的简便方式。例如,接下来的代码段引导SystemJS像这样:System.import('app')
仅经过文件名和默认扩展名ts去加载位于main_router_sample.ts文件:
System.config({
packages: {
app: {
defaultExtension: "ts",
main: "main_router_sample"
}
}
});
System.import('app');
app
paths选项和map很类似,可是支持通配符,它应用在map以后但在baseURL以前,你能够用map和paths,可是请记住paths是Loader规范和ES6模块Loader的一部分,但map只被SystemJS识别:
System.config({ baseURL: '/app', map: { 'es6module': 'esSixModule.js' }, paths: { '*': 'lib/*' } }); System.import('es6module'); // GET /app/lib/esSixModule.js
在这本书的不少例子中,你将会看到System.import('app')
,这意味着打开了一个不一样名字的文件(不是app),由于咱们设置过了map或package属性。当你看到像import{Component}from '@angular/core';
,@angular会映射到真实路径,即Angular框架所在之处,.core是子目录,子目录的main文件在SystemJS配置中被特指,在这个例子中:
packages: { '@angular/core' : {main: 'index.js'} }
框架
transpiler选项容许你指定转换模块器的名字,转换模块器被用来加载应用模块。若是一个文件不包含至少一个import或export声明,它不会被转换。transplier能以包含如下三个值: typescript,traceur和babel:
System.config({ transpiler: 'traceur', map: { traceur: '//unpkg.com/traceur@0.0.108/bin/traceur.js' } });
url