我正在尝试移植一些我编写的使用 systemjs + Babel 的 ES6 代码。
我在移植大部分代码时没有任何问题。
但是,我有一些代码需要动态加载 ES6 模块,如下所示:
function load(src) {
System.import(src).then(function() {});
}
src 是一个外部 ES6 模块,也可能具有依赖关系(静态导入)。
我怎样才能把这段代码移植到Webpack?如果我尝试使用 require 语句,我会收到一个警告,根据 Webpack 文档,这似乎是正常的。
之前的答案是正确的,但现在在 webpack 2.2 + babel 中(截至撰写本文时,v2.2.0-rc.3 是最新版本)我们可以做到这一点。我没有测试过自己,但只是做了将我带到这里的研究。
从 webpack 文档中阅读以下内容:使用 es2015 进行代码拆分
该部分的正下方是动态表达式,其中包含以下示例:
function route(path, query) {
return import("./routes/" + path + "/route")
.then(route => new route.Route(query));
}
// This creates a separate chunk for each possible route
请务必注意,您需要安装语法动态导入插件,如文档所述。
Webpack 1 不支持 System.import,你可以通过使用 Webpack 的require.ensure
来动态加载模块来解决这个问题。该方法的详细信息可在此处找到:https://webpack.github.io/docs/code-splitting.html#es6-modules
根据您想要执行的操作,您可能还需要使用 Webpack 的context
功能,请参阅此处以获取更多信息 https://webpack.github.io/docs/context.html
Webpack 2 应该解决这些问题,因为它将直接支持 ES6 和 System.import。
webpack 中没有"动态加载"这样的东西(因为捆绑器需要下降到所有模块依赖项)。最接近你想要实现的目标(以及在 webpack 中实现它的正确方法)是使用 require.ensure
- 请参阅文档。
将 SystemJS 代码转换为 webpack 的一种方法是:
function load(moduleName) {
switch (moduleName) {
case 'foo':
require.ensure([], require) => {
const foo = require('./foo.js');
// do something with it
}
break;
case 'bar':
require.ensure([], require) => {
const bar = require('./bar.js');
// do something with it
}
break;
}
}
我建议您创建一个 load 函数来封装每个require.ensure
(您可能希望以不同的方式管理回调)。
您可以在此处查看示例
您可以尝试使用像little-loader这样的库来处理这个问题。例:
var load = require('little-loader');
load('<src>', function(err) {
// loaded now, do something
});