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

我正在尝试使用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加载动态模块的工作示例吗?

解决方法

这里真的有三件事…… dynamic importing,延迟加载和代码拆分/捆绑.使用 ES6 Module Loader进行多边形填充的System.import方法将允许动态导入,但不允许动态导入 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.

动态代码拆分是指在入口点内创建子包时,然后可以动态延迟加载.为此,我建议使用比require.ensure更友好的promise-loader

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

...

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

Webpack现在将edit.js模块及其所有依赖项分解为一个单独的bundle,可以立即或动态加载(如上所示).最后,根据应用程序的大小,我认为你也应该考虑splitting the vendor code out.

UPDATE

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...