学习SystemJS 笔记

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),因为我们设置过了mappackage属性。当你看到像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' } });

转载于:https://www.cnblogs.com/xhy-steve/p/6655603.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值