动态System.import与webpack？

Question

我试图移植一些我编写的使用systemjs + Babel的ES6代码.

移植大部分代码时没有任何问题.

但是,我有一些代码需要动态加载ES6模块,如下所示:

function load(src) {
    System.import(src).then(function() {});
}

src是一个外部ES6模块,它也可能有依赖项(静态导入).

我怎么能把这个代码移植到Webpack？如果我尝试使用require语句,我会收到一个警告,根据Webpack文档,这似乎是正常的.

Answer 1

以前的答案是正确的,但现在在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

请务必注意,您需要安装语法动态导入插件,如文档所述.

Answer 2

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

我建议您创建一个封装每个函数的加载函数require.ensure（您可能希望以不同的方式管理回调）。

你可以在这里查看一个例子