Angular2 -- SystemJS解析

超、凢脫俗 2022-09-30 06:29 123阅读 0赞

![1240][]

文 | Yeaseon

#### SystemJS ####

SystemJS是一个通用的动态模块加载器，Angular2就是通过SystemJS加载所需的模块。

#### SystemJS 配置函数 ####

通过`System.config`函数进行配置：

System.config({
        configA: {},
        configB: 'value'
    });

#### SystemJS 可配置项 ####

*  babelOptions
 *  bundle
 *  defaultJSExtensions
 *  depCache
 *  map
 *  meta
 *  packages
 *  paths
 *  traceurOptions
 *  transpiler
 *  typescriptOptions

在Angular2的‘英雄联盟’教程中，我们的`systemjs.config.js`脚本中只配置了`map`和`packages`两项，其他配置选项[详情][Link 1]。

map

> map tells the System loader where to look for things

以下是Angular2中的配置：

var map = {
        'app':                        'app', // 'dist',
        '@angular':                   'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       'node_modules/rxjs'
      };

packages

> packages tells the System loader how to load when no filename and/or no extension

以下是Angular2中的配置：

var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
      };

*  `main`: package的主要入口
 *  `defaultExtension`：默认扩展名

然后完成对于SystemJS的配置：

var config = {
        map: map,
        packages: packages
      };
    System.config(config);

`System.import`告诉SystemJS引入`main`文件，`main`文件是Angular启动应用的地方。  
在根目录`index.html`

并没有看到`main`相关的字眼，只有一个`app`被引入，这就要回到我们上面提到的`packages`配置项，SystemJS会自动寻找`./app/main.j s`，这样我们的应用就可以在`main`中启动了。

转载：http://www.jianshu.com/p/db4be331b026

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 2]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[1240]: /images/20220708/555e1ac15c594a9f92a785c822e07e73.png
[Link 1]: https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#map
[Link 2]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220708/a5cb462d4d2a4018919858370c9513c4.png