SystemJS 模块加载器

SystemJS 诞生于 2015 年，那个时候 ES Module 还未成为标准，在浏览器端只能通过 requirejs、seajs 等方案实现模块加载，随着 npm 在前端界的流行，一个项目中可能存在多种模块规范，所以我认为 SystemJS 最初诞生的目的是为了做一个通用的模块加载器，在浏览器端实现对 CommonJS、AMD、UMD 等各种模块的加载。

后来，随着 ES6 的普及，越来越多的浏览器开始支持 ES Module， SystemJS 是现阶段下(浏览器尚未正式支持importMap)原生 ES Module 的替代品，ES Module 被编译成 System.register 格式之后能够跑在旧版本的浏览器当中。

Import Maps

<script type="module">
    import moment from "moment";
    import { partition } from "lodash";
</script>

这样写会报错，原因是在浏览器中，import 必须给出相对或绝对的 URL 路径。没有任何路径的模块被称为“裸（bare）”模块。在 import 中不允许这种模块。某些环境，像 Node.js 或者打包工具允许没有任何路径的裸模块，因为它们有自己查找模块的方法。但是浏览器尚不支持裸模块。

但是如果有了 Import Maps

<script type="importmap">
{
  "imports": {
    "moment": "/node_modules/moment/src/moment.js",
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}
</script>

上面的写法就能被解析为：

<script type="module">
    import moment from "/node_modules/moment/src/moment.js";
    import { partition } from "/node_modules/lodash-es/lodash.js";
</script>

Import maps 在 Chrome 74 中可以通过实验性质开启，本质上是一个配置文件，可以让开发者将模块标识符映射到一到多个其他标识符的机制，这个机制非常强大，它赋予了开发者在运行时针对指定的模块动态修改浏览器实际获取模块的能力。该配置文件描述了依赖的解析方式，某种程度上，Import maps 给浏览器端带来了包管理，但是目前支持 Import Maps 的浏览器还很少。

如果想要使用这个特性的话，需要引入 SystemJS

<script type="systemjs-importmap">
  {
    "imports": {
      "moment": "https://cdn.jsdelivr.net/npm/moment/dist/moment.js",
      "lodash": "https://cdn.jsdelivr.net/npm/lodash/dist/lodash.js"
    }
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>

在 single-spa 的使用过程中，我们需要用 import-map 在根项目中引入所有的模块文件和子项目，从而在其余项目中可以进行模块的引用，就像上面说的那样，可以把 moment 想象成一个子项目。

<script type="systemjs-importmap">
  {
    "imports": {
      "module": "https://[cdn-link].js",
    }
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>

把 import-map 里的文件放到一个 json 当中，就变成了

<script type="systemjs-importmap" src="https://[bucket]/import-map.json"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>

我们开发者需要做的，就是把模块文件打包成单一的 cdn 文件，然后引入 import-map.json，实现子模块的引入。