ecmascript-6 - 如何在 Babel 和 Webpack 中动态加载模块？

Question

我正在尝试使用 ES6 中的动态模块加载功能，但它似乎还没有真正实现。但也有像 ES6 Module Loader Polyfill 这样的替代品据说暂时应该可以解决问题。

所以我有一个使用 Babel 和 Webpack 将 ES6 项目转换为 ES5 的项目，并且它本身就可以正常工作。但是我的所有代码都合并到一个 bundle.js 文件中，我想将其拆分为模块。当我尝试提到的 Polyfill 时，它会从内部抛出一些错误，并且项目甚至无法启动。

index.js:6 Uncaught TypeError: Cannot read property 'match' of undefined

第 6 行内容如下:

var filePrefix = 'file:' + (process.platform.match(/^win/) ? '/' : '') + '//';

这是我的 package.js文件:

{
  "dependencies": {
    "es6-module-loader": "^0.17.11",
    "events": "^1.1.0",
    "flux": "^2.1.1",
    "fs": "0.0.2",
    "react": "^15.0.2",
    "react-addons-css-transition-group": "^15.0.2",
    "react-dom": "^15.0.2",
    "react-router": "^2.4.0",
    "react-tap-event-plugin": "^1.0.0",
  },
  "devDependencies": {
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "html-webpack-plugin": "^2.16.1",
    "react-hot-loader": "^1.3.0",
    "transfer-webpack-plugin": "^0.1.4",
    "webpack": "^1.13.0",
  }
}

有人可以指出一个使用 Webpack 和 Babel 加载动态模块的工作示例吗？

Answer 1

这里真的有三件事在起作用... dynamic importing 、延迟加载和代码拆分/捆绑。 System.import方法，用 ES6 Module Loader 填充将允许动态导入，但 不是 动态code splitting :

However, most transpilers do not support converting System.load calls to require.ensure so you have to do that directly if you want to make use of dynamic code splitting.

动态代码拆分是当您在入口点内创建子包时，您可以动态地延迟加载。为此，我建议使用 promise-loader比 require.ensure更友好一点:

import LoadEditor from 'promise?global,[name]!./editor.js';

...

if (page === 'editor') {
  LoadEditor().then(Editor => {
    // Use the Editor bundle...
  })
} 

Webpack 现在将打破 editor.js模块和它的所有依赖项到一个单独的包中，可以立即或动态加载(如上所示)。最后，根据应用程序的大小，我认为您还应该考虑 splitting the vendor code out .

更新
System.import已从规范中删除并仅替换为 import() .新的 webpack 文档有一个 page that discusses dynamic imports在 webpack 中以及它们的局限性。