在生产环境中使用 SystemJS/jspm 加载异步、es5 模块 [英] Using SystemJS/jspm to load async, es5 modules in production

问题描述

我希望能够使用 System.import() 异步加载依赖项，但不必在生产运行时将 ES6 转换为 ES5.我希望将这些模块转换为单独的 ES5 模块，这些模块仅在需要时才获取.我不希望它们成为主包的一部分.

I want to be able to asynchronously load dependencies using System.import(), but without having to transpile ES6 to ES5 during production runtime. I want these modules to be transpiled into separate, ES5 modules that are fetched only when needed. I don't want them to be a part of the main bundle.

开发工作流程

模块在我的生产构建期间有效加载，这实际上令人担忧，因为我不想包含任何允许转译的依赖项.

The modules are effectively loading during my production build which is actually worrisome because I don't want to include any dependencies that allow for transpilation.

我有一个工作流，我使用 jspm bundle 和 jspm unbundle 在开发和生产配置之间切换.在我的开发环境中，我包含以下脚本:

I have a workflow where I'm using jspm bundle and jspm unbundle to toggle between development and production configurations. In my development environment, I'm including the following scripts:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>

<script>
    System.import('src/main');
</script>

生产工作流程

在生产中，我使用 jspm bundle --inject 将 bundles 选项注入 System.config.这有效地仅加载必要的文件:

In production, I'm using jspm bundle --inject to inject the bundles option into System.config. This effectively loads only the necessary files:

system.js
config.js
main.bundle.js

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

When I try to load a module asynchronously with System.import() during production, it loads fine, which means that transpilation is happening in the browser during production.

问题

1. 我可以轻松地将我的每个模块构建到 AMD 中，但我如何仍然使用 System.import()?

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

I also want to make sure to include as little browser overhead as possible, which means not including any scripts that perform transpilation. Is there a way to include system.js that does not have transpile capabilities?

推荐答案

答案 1

System.import() 用于加载模块.模块是必不可少的 .js 文件，可导出函数、对象或类等内容.

System.import() is used for loading modules. Modules are essential .js files that export something such as a function or an Object or a Class.

如果您将代码组织成单独的文件，那么您可以使用 .. 将它们加载到另一个文件的头部.

If you organise your code into separate files then you can load them either in the head of another file using ..

import * as YM from 'YourModuleFile';

这将使 YM 在整个文件中都可以访问.

this would make YM accessible in the entire file.

或者，如果您想在按钮上加载 YM，请改为单击 ..

Or if you want YM loaded on a button click instead ..

element.onclick = function() {
    System.import('YourModuleFile').then(function(YM) {
        // YM accessible here
    })
}

所以重要的是在文件/模块中组织好你的代码.

So the important thing becomes organising your code well inside files / modules.

然后您可以使用 npm 任务运行器(例如 gulp)来压缩文件等.

You then might use an npm task runner such as gulp to compress the files, etc.

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

Of course, you will need to enter some mappings inside your systemjs.config.js file such as ..

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

以便 SystemJS 可以找到它.

So that SystemJS can find it.

答案 2

JSPM 具有 tranpile 功能，我不确定 SystemJS 是否具有.

JSPM has tranpile capabilities, I'm not sure SystemJS does.

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

Ensure JSPM (or your tool of choice) transpiles your files. Then point SystemJS to the transpiled files.

这篇关于在生产环境中使用 SystemJS/jspm 加载异步、es5 模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！