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

我想在ES6中使用动态模块加载功能，它似乎并没有实际实现。但是还有像ES6 Module Loader Polyfill这样的替代品，据说暂时应该这样做。如何在Babel和Webpack中动态加载模块？

所以我有一个ES6项目使用Babel和Webpack转换到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和巴贝尔工作的例子吗？

来源

2016-05-13 Mehran

你可能会说'require.ensure' - [这是一个工作示例]（https://github.com/topheman/webpack-babel-starter/blob/master/src/bootstrap.js#L57） – topheman

@topheman我认为这是一种不同的技术，但很高兴知道。谢谢。 – Mehran

这里真的有三件事... dynamic importing，延迟加载和代码拆分/捆绑。该System.import方法，聚充满ES6 Module Loader将允许动态的进口，但不动态code splitting：

然而，最transpilers不支持转换System.load调用require.ensure所以你必须，如果你想这样做直接利用动态代码分割。

动态代码拆分是当您在入口点内创建子包时，您可以动态延迟加载。为此，我建议你使用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。

UPDATE

System.import从规范取出，并通过刚刚import()更换。新的webpack文档在webpack中有page that discusses dynamic imports以及它们的局限性。

来源

2016-05-14 05:46:04

有没有什么办法可以省略'editor.js'而不是在我的代码中命名？我需要编写一个加载文件的代码，而不必事先了解它。在我看到的所有示例中，要加载的模块在相同的文件中显式命名，因为它将被动态加载！它对我来说听起来不那么活跃。 – Mehran

@Mehran如链接答案中所述，动态可以引用很多东西，但通常意味着需要运行一些代码来确定是否加载模块。你想使用变量名或其他东西来导入它？你是否试图迭代并加载一堆文件？ –

的确，我有一组我想根据用户事件加载的文件路径。迭代代码不知道它们是什么。它只是让他们在一个变量。甚至有些情况下，该集合在运行时被填充！ – Mehran

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

回答

相关问题