6

我正在尝试移植一些我编写的使用systemjs + Babel 的 ES6 代码。

移植大部分代码我没有任何问题。

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

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

src 是一个外部 ES6 模块，它也可能具有依赖项（静态导入）。

我如何将此代码移植到 Webpack ？如果我尝试使用 require 语句，我会收到一个警告，根据 Webpack 文档，这似乎是正常的。

4

4 回答 4

9

之前的答案是正确的，但现在在 webpack 2.2 + babel 中（截至发稿时，v2.2.0-rc.3是最新版本）我们可以做到这一点。我没有测试过自己，但也只是做了引导我到这里的研究。

从 webpack 文档中阅读：Code Splitting with 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

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

于 2017-01-06T02:17:11.060 回答
3

Webpack 1 不支持 System.import，您可以通过使用 Webpackrequire.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。

于 2016-06-15T18:06:15.380 回答
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（您可能希望以不同的方式管理回调）。

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

于 2016-03-19T16:07:39.850 回答
1

你可以尝试使用像little-loader这样的库来处理这个问题。例子：

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

load('<src>', function(err) {
    // loaded now, do something
});
于 2016-03-20T07:55:06.127 回答