使用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. 我还想确保包含尽可能少的浏览器开销 可能，这意味着不包括任何执行的脚本 transpilation。有没有办法包括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
    })
}

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

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

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

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

这样SystemJS就可以找到它。

回答2

JSPM具有transpile功能，我不确定SystemJS是否具备。

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