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

Using SystemJS/jspm to load async, es5 modules in production

本文关键字：异步 加载 es5 模块 生产环境 SystemJS jspm 使用      更新时间：2023-09-26

我希望能够使用 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() 异步加载模块时，它加载正常，这意味着在生产过程中浏览器中发生了转译。

问题

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

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

答案 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具有传输功能，我不确定SystemJS是否具有。

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

相关文章：