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

Question

我正在尝试使用ES6中的动态模块加载特性，而且它似乎还没有实际实现。但也有像ES6模块装载机填料这样的替代品，这应该是暂时可行的。

因此，我有一个ES6项目，使用Babel和Webpack转到ES5上，它自己工作得很好。但是，我的所有代码都合并到一个bundle.js文件中，我想将该文件拆分为模块。当我尝试上面提到的多边形填充时，它会从内部抛出一些错误，这个项目甚至都不会启动。

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

这里有三件事.动态 进口、延迟加载和代码拆分/捆绑。System.import方法，用ES6模块加载器填充，将允许动态导入，但不允许动态码分裂。

但是，大多数传输程序不支持将System.load System.load调用转换为 require.ensure，因此如果要使用动态代码拆分，就必须直接这样做。

动态代码分裂是在入口点内创建子包时，然后可以动态延迟加载。为此，我建议使用比承诺装载机更友好的require.ensure

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

...

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

Webpack现在将将editor.js模块及其所有依赖项分解为一个单独的包，该包可以立即或动态加载(如上面所示)。最后，根据应用程序的大小，我认为您也应该考虑将供应商代码拆分。

更新

System.import被从规范中删除，代之以import()。webpack的新博士在webpack有一个页，讨论动态导入。，以及他们的局限性。