使用SystemJS/jspm在生产中加载async,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没有透明功能的方法？

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

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