跳到主要内容

认识

2023年08月20日
柏拉文
越努力，越幸运

一、认识​

SystemJS 是一个通用的 JavaScript 模块加载器，它支持多种模块系统的加载，包括 ES Modules、CommonJS 和 AMD。SystemJS 的设计目的是为了解决不同模块系统之间的兼容性问题，提供一个统一的模块加载解决方案。 SystemJS 支持多种模块格式如下:

  • ES Modules（ESM）：支持 ES6 的静态模块导入和导出语法。

  • CommonJS：支持 Node.js 的 require 和 module.exports 语法。

  • AMD: 支持 Asynchronous Module Definition 的 define 和 require 语法。

  • UMD: 支持 Universal Module Definition 的模块系统，能够兼容多种模块环境。

二、语法​

System.import('./module.js').then(module => {
    console.log(module.default); // 假设 module.js 有默认导出
});

三、场景​

3.1 Node​

3.2 HTML​

SystemJs 是一个通用的模块加载器，有属于自己的模块化规范。在浏览器中通过SystemJs来加载模块。SystemJS可兼容到IE11，但是它对于插件版本要求非常严格，而且变化非常大，兼容性也不是特别好，使用体验也不是很好，所以目前实践中用的非常少。它同样支持import映射，但是它的语法稍有不同:

<script type="systemjs-importmap">
{
  "imports": {
    "lodash": "https://unpkg.com/lodash@4.17.10/lodash.js"
  }
}
</script>

<script>
  async function load (moduleName){
      const module = await System.import(moduleName);
      return module;
  }

  load(lodash);
</script>

3.3 Webpack​