SystemJS 开源项目教程

2026-01-22 04:23:21作者：宗隆裙

1. 项目介绍

SystemJS 是一个可钩子的、基于标准的模块加载器。它提供了一种工作流程，使得为浏览器中的原生 ES 模块编写的代码（如 Rollup 代码分割构建）可以被转译为 System.register 模块格式，以便在不支持原生模块的旧浏览器中运行，同时保持接近原生模块的速度。SystemJS 支持顶级 await、动态导入、循环引用、实时绑定、import.meta.url、模块类型、导入映射、完整性和内容安全策略等功能，兼容性可追溯到 IE11。

2. 项目快速启动

安装

首先，通过 npm 安装 SystemJS：

npm install systemjs

使用

在你的 HTML 文件中引入 SystemJS，并加载一个 System.register 模块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SystemJS 快速启动</title>
</head>
<body>
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script type="systemjs-module" src="/js/main.js"></script>
</body>
</html>

main.js 文件内容如下：

System.register([], function (_export, _context) {
    "use strict";
    return {
        execute: function () {
            console.log("Hello, SystemJS!");
        }
    };
});

动态加载模块

你也可以在 JavaScript 代码中动态加载模块：

System.import('/js/main.js').then(function (module) {
    console.log("模块加载成功");
}).catch(function (err) {
    console.error("模块加载失败", err);
});

3. 应用案例和最佳实践

应用案例

SystemJS 常用于以下场景：

旧浏览器兼容：在不支持原生 ES 模块的旧浏览器中运行现代 JavaScript 代码。
模块动态加载：在运行时动态加载和执行模块，适用于需要按需加载的场景。
模块热重载：通过 SystemJS 的钩子功能，实现模块的热重载，提高开发效率。

最佳实践

使用 import maps：通过 <script type="systemjs-importmap"> 定义导入映射，简化模块路径管理。
优化加载性能：使用 SystemJS 的缓存机制，减少模块加载时间。
兼容性处理：为 IE11 等旧浏览器提供必要的 polyfill，确保兼容性。

4. 典型生态项目

Rollup

Rollup 是一个现代 JavaScript 模块打包器，支持代码分割和 Tree-shaking 等高级功能。SystemJS 可以与 Rollup 结合使用，生成适用于旧浏览器的模块化代码。

Babel

Babel 是一个 JavaScript 编译器，可以将现代 JavaScript 代码转换为向后兼容的版本。SystemJS 可以与 Babel 结合，实现对 TypeScript 和 ES 模块的支持。

ES Module Shims

ES Module Shims 是一个用于扩展浏览器原生模块功能的库，与 SystemJS 类似，但它直接在浏览器原生模块系统上工作，通过 Wasm 进行源代码重写，实现模块规范的兼容。

通过以上内容，你可以快速上手 SystemJS，并了解其在实际项目中的应用和最佳实践。

systemjs

Dynamic ES module loader

项目地址：https://gitcode.com/gh_mirrors/sy/systemjs

登录后查看全文