System.js详解

Posted 2020-09-29

这几天研究TypeScript和Angular 4期间遇到很多坑，代码问题解决起来还比较快速，但是到灵活部署的时候才发现坑好多。以前学习的Typescript和angular都是看书加揣摩，没有正在运用在实际上面，所以一段时间后就遗忘了，导致浪费了很多时间，又要重头学起，所以以后要边学边用，不学不用。哈哈，废话不多说，下面进入正题：

Angular Quick Start教程中主要包含了2个配置文件，一个是tsconfig.json，一个是system.js。 tsconfig.json为 TypeScript 编译器指定如何将 TypeScript 代码转换为javascript文件 ，Typescript是JavaScript的一个超集，详情大家可以去官网查看。这篇文档主要介绍的就是System.js的作用。

SystemJS

加载模块

Systemjs是一个可配置模块加载器，为浏览器和NodeJs启用动态的Es模板加载器。任何具有标准的URL都可被加载为一个模块：

<script src="system.js"></script>
<script>
  // 加载相对于当前地址的url
  SystemJS.import(‘./local-module.js‘);

  // 加载绝对url的地址
  SystemJS.import(‘https://code.jquery.com/jquery.js‘);
</script>

可以加载任何类型的模块格式，并由SystemJS自动检测。

文件访问权限

在本地运行时，请确保从本地服务器或启用了本地XHR请求的浏览器运行。如果不是，将会收到一条错误消息。

对于Mac上的Chrome，您可以运行它： /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files &> /dev/null &

在Firefox中，这需要导航到about:config，进入security.fileuri.strict_origin_policy过滤器框并将选项切换为false。

加载ES6

app/es6-file.js:

export class q {
    constructor() {
      this.es6 = ‘yay‘;
    }
  }

  <script>
    SystemJS.import(‘./app/es6-file.js‘).then(function(m) {
      console.log(new m.q().es6); // yay
    });
  </script>

　　ES6模块定义名为export，提供一个静态构造函数访问器。

装载期的配置

一些标准配置选项及其用例如下所述。

baseURL

baseURL提供了一种根据一个相对地址装载模块的机制。

这使得能够从许多不同的请求URL访问相同的模块

SystemJS.config({
  baseURL: ‘/modules‘
});

// 加载 /modules/jquery.js
SystemJS.import(‘jquery.js‘);

　　

上述表单中的模块名称相对清晰，并且始终是相对于baseURL来加载的，而不是依赖于parentURL，它们就像普通URL一样。

当加载相对语法时，模块不是依赖于baseURL，但是和baseURI很有关系：

// 根据baseUri加载，而不是BaseUrL
SystemJS.import(‘./x.js‘);