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文档：Code Splitting with es2015

在该部分的下方Dynamic Expressions就是这个例子：

＆＃13;

function route(path, query) {
  return import("./routes/" + path + "/route")
    .then(route => new route.Route(query));
}
// This creates a separate chunk for each possible route

＆＃13;

请务必注意，您需要安装Syntax Dynamic Import plugin，如文档所述。

Answer 2

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＆amp; System.import直接。

Answer 3

你在webpack中没有“动态加载”这样的东西（因为捆绑包需要归结为你所有的模块依赖关系）。与您想要实现的目标（以及在webpack中执行此操作的正确方法）最接近的是使用require.ensure - see documentation。

将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的加载函数（你可能希望以不同的方式管理回调）。

您可以查看示例here

Answer 4

您可以尝试使用little-loader之类的库来处理此问题。例如：

var load = require('little-loader');

load('<src>', function(err) {
    // loaded now, do something
});

动态System.import与webpack？

4 个答案: