使用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 选项注入到 System.config 中。这有效地加载了仅必要的文件：

system.js
config.js
main.bundle.js

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

---

问题

1. 我可以轻松地将每个模块构建为AMD格式，但如何使用System.import()异步和分开获取它们？

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

- Himmel

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
    })
}

因此，重要的事情是在文件/模块内很好地组织您的代码。

然后，您可以使用像gulp这样的npm任务运行器来压缩文件等。

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

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

为了让SystemJS能够找到它。

答案2

JSPM具有转译功能，我不确定SystemJS是否具备此功能。

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

- danday74