使用 SystemJS/jspm 在生产中加载异步、es5 模块

Posted 2023-02-19

【中文标题】使用 SystemJS/jspm 在生产中加载异步、es5 模块

【英文标题】：Using SystemJS/jspm to load async, es5 modules in production

【发布时间】：2016-07-01 08:18:49

【问题描述】：

我希望能够使用 System.import() 异步加载依赖项，但不必在生产运行时将 ES6 转换为 ES5。我希望将这些模块转译成单独的 ES5 模块，这些模块仅在需要时才被获取。我不希望它们成为主捆绑包的一部分。

开发工作流程

这些模块在我的生产构建期间有效加载，这实际上令人担忧，因为我不想包含任何允许编译的依赖项。

我有一个工作流，我使用jspm bundle 和jspm unbundle 在开发和生产配置之间切换。在我的开发环境中，我包含以下脚本：

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>

<script>
    System.import('src/main');
</script>

生产工作流程

在生产中，我使用jspm bundle --inject 将bundles 选项注入System.config。这实际上只加载了必要的文件：

system.js
config.js
main.bundle.js

当我在生产期间尝试使用System.import() 异步加载模块时，它加载正常，这意味着在生产期间在浏览器中进行了转译。

---

问题

我可以轻松地将我的每个模块构建到 AMD 中，但我怎么还能 使用 System.import() 异步和单独获取它们？

我还想确保包含尽可能少的浏览器开销 可能，这意味着不包括任何执行的脚本 转译。有没有办法包含system.js 有转译能力吗？

【参考方案1】：

答案 1

System.import() 用于加载模块。模块是必不可少的 .js 文件，用于导出函数、对象或类等内容。

如果您将代码组织成单独的文件，那么您可以使用 .. 将它们加载到另一个文件的头部。

import * as YM from 'YourModuleFile';

这将使 YM 在整个文件中都可以访问。

或者，如果您希望在按钮上加载 YM，而不是点击 ..

element.onclick = function() 
    System.import('YourModuleFile').then(function(YM) 
        // YM accessible here
    )

所以重要的是在文件/模块中组织好你的代码。

然后您可以使用 npm 任务运行器（例如 gulp）来压缩文件等。

当然，您需要在 systemjs.config.js 文件中输入一些映射，例如 ..

'YourModuleFile': '/path/to/your/module/file.js'

以便 SystemJS 可以找到它。

答案 2

JSPM 有 tranpile 能力，我不确定 SystemJS 有。

确保 JSPM（或您选择的工具）转译您的文件。然后将 SystemJS 指向转换后的文件。