SystemJS使用记录

SystemJS提供通用的模块导入途径，支持传统模块和ES6的模块。

1. 没有package configurations和插件的时候，可以使用system-production.js，否则应使用system.js。

2. 基本使用
   <script src="systemjs/dist/system.js"></script>
   <script>
   SystemJS.import('/js/main.js');
   SystemJS.import('https://code.jquery.com/jquery.js');
   </script>

3. 配置js文件的前缀和别名
   SystemJS.config({
   // 前缀
   baseURL:'/modules',
   // 名称映射(别名)
   map: {
   onejs:'main.js',
   }
   })
   SystemJS.import('onejs');
   实际加载，/modules/main.js

   如果路径中以./开头，则不应用前缀和别名
   SystemJS.import('./main.js');
   实际加载，main.js
   

4. 导入模块是一个异步过程，最好不要直接使用，用Promise等加载完毕，再使用。
   SystemJS.import('onejs')
   .then(function(m){
   console.log(m.name);
   }
   );

5. 加载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>

6. 加载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>

7. packages提供了一个设置metadata 和 映射配置(特指公共路径的便捷方式)的简便方式
   SystemJS.config({
   packages: {
   'app':{main:'main', defaultExtension: 'js'}
   }
   })
   SystemJS.import('app');
   // 加载: /app/main.js