使用 webpack 动态 System.import? [英] Dynamic System.import with webpack?

问题描述

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

I am trying to port some ES6 code I have written that uses systemjs + Babel.

我在移植大部分代码时没有遇到任何问题.

I didn't have any problem porting most of the code.

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

However, I have some code that needs to dynamically load an ES6 module, like this:

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

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

src is an external ES6 module which may also have dependencies (static imports).

我怎样才能将此代码移植到 Webpack 上?如果我尝试使用 require 语句，我会收到一个警告，根据 Webpack 文档，这似乎是正常的.

How could I port this code to Webpack ? If I try to use require statement I'm getting a WARNING which seems to be normal according to the Webpack docs.

推荐答案

之前的答案是正确的，但现在在 webpack 2.2 + babel 中(在撰写本文时，v2.2.0-rc.3 是最新版本)我们可以做到.我还没有测试过自己，但也做了引导我来到这里的研究.

The previous answers were correct, but now in webpack 2.2 + babel (as of writing, v2.2.0-rc.3 is the latest version) we can do this. I have not tested myself, but just did the research that lead me here as well.

从 webpack 文档中阅读此内容:使用 es2015 进行代码拆分

Read this from the webpack documentation: Code Splitting with es2015

在该部分的正下方是动态表达式 与此示例:

Just below that section is Dynamic Expressions with this example:

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

请务必注意您需要安装语法动态导入插件，正如文档中提到的.

Be sure to note you will need to install the Syntax Dynamic Import plugin, as the doc mentions.

这篇关于使用 webpack 动态 System.import?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！