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

Question

我希望能够使用 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 选项注入(inject)到 System.config 中。这有效地仅加载必要的文件:

system.js
config.js
main.bundle.js

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

---

问题

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

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

Answer 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 具有转运能力，我不确定 SystemJS 是否有。

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