SystemJS提供通用的模块导入途径,支持传统模块和ES6的模块。
没有package configurations和插件的时候,可以使用system-production.js,否则应使用system.js。
基本使用
<script src="systemjs/dist/system.js"></script>
<script>
SystemJS.import('/js/main.js');
SystemJS.import('https://code.jquery.com/jquery.js');
</script>-
配置js文件的前缀和别名
SystemJS.config({
// 前缀
baseURL:'/modules',
// 名称映射(别名)
map: {
onejs:'main.js',
}
})
SystemJS.import('onejs');
实际加载,/modules/main.js如果路径中以./开头,则不应用前缀和别名 SystemJS.import('./main.js'); 实际加载,main.js
导入模块是一个异步过程,最好不要直接使用,用Promise等加载完毕,再使用。
SystemJS.import('onejs')
.then(function(m){
console.log(m.name);
}
);-
加载TypeScript模块,需要配置解码器transpiler: 'typescript'
<script src="//unpkg.com/typescript@2.0.0"></script>
<script src="system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true},
})SystemJS.import('./demo.ts').then(function(m) {
console.log(m.color);
});
</script> 加载ES6模块,也要配置解码器,SystemJS最好使用0.19版本,而不是0.20版本
<script src="traceur.js"></script>
<script src="system.src.js"></script>
<script>
System.config({
transpiler: 'traceur',
traceurOptions: {annotations: true},
});
SystemJS.import('./demo.js').then(function(m) {
console.log(new m.q().es6); // yay
});
</script>
- packages提供了一个设置metadata 和 映射配置(特指公共路径的便捷方式)的简便方式
SystemJS.config({
packages: {
'app':{main:'main', defaultExtension: 'js'}
}
})
SystemJS.import('app');
// 加载: /app/main.js