baseURL
所有模块相对于这个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
defaultExtensions
如果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
** 警告:defaultJSExtensions会向后兼容,将来会被废弃 **
map
map选项允许你为模块名创建一个别名,当你引入一个模块,模块名会被相应的值替换,除非原始模块名是任何路径(绝对或相对)。map参数应用在 baseURL 之前:
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
packages
packages提供了一个设置metadata 和 映射配置(特指公共路径的便捷方式)的简便方式。例如,接下来的代码段引导SystemJS像这样:System.import('app')
仅通过文件名和默认扩展名ts去加载位于main_router_sample.ts文件:System.config({
packages: {
app: {
defaultExtension: "ts",
main: "main_router_sample"
}
}
});
System.import('app');
paths
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
transpiler选项允许你指定转换模块器的名字,转换模块器被用来加载应用模块。如果一个文件不包含至少一个import或export声明,它不会被转换。transplier能以包含以下三个值: typescript,traceur和babel:System.config({ transpiler: 'traceur', map: { traceur: '//unpkg.com/traceur@0.0.108/bin/traceur.js' } });