前端模块化 - SystemJSSystemJS是可配置的模块加载器使用System.register方法注册模块使

SystemJS是可配置的模块加载器
使用System.register方法注册模块
使用System.import方法导入模块

为了提高生产环境模块的性能

Import Maps

<script type="module">
    import moment from "moment";
</script>

会报错，因为浏览器中，import必须给出相对或绝对的URL路径。有了Import Maps后

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

然后会被解析成

<script type="module">
    import moment from "/node_modules/moment/src/moment.js";
</script>

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

caniuse-import maps

如果想要这个特性，需要引入SystemJS

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

应用

single-spa

是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架

StackBlitz 社区

StackBlitz 是社区非常著名的一个在线 WebIDE，它就是基于 SystemJS 和 Unpkg 实现 bundless。