动态的System.import与webpack吗? [英] 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中(撰写本文时，

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.

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