如何使用 webpack 在 React 应用程序中异步请求模块？

Question

在 React 应用程序中，我想只为某个路由/路径导入一个名为 flowtime.js 的库，然后执行更多代码。这个库有一个名为 Brav1toolbox 的依赖项。在 npm 上都没有。

我的策略是在组件的componentDidMount方法中使用webpack的require。这是我的尝试：

componentDidMount() {
  require.ensure([ 'local/relative/path/to/lib/brav1toolbox.js'], function(require) {
    var f = require('local/relative/path/to/other/lib/Flowtime.js/js/flowtime.js');
  });
}

这会导致以下错误。

Uncaught (in promise) ReferenceError: Brav1Toolbox is not defined

所以 Flowtime 正在加载，但无法找到 Brav1Toolbox。

我对 React 或 webpack 都没有经验，所以我可能有一个误解。我正在尝试使用 webpack 仅在我的用户访问需要这些库的路径时才加载这些库。 This is the webpack guide 我用作参考。

感谢您的帮助。

Answer 1

这取决于您的 webpack 版本，但您在代码拆分/路由分块方面走在了正确的轨道上。

对于 webpack v2，我建议查看 Webpack documentation。

使用 webpack 2，您可以在需要的反应容器/组件中请求库，然后根据路径动态加载代码。一个如何通过两个示例路由使用 react-router 执行此操作的示例，例如“/home”和“/about”，如下：

<Route path="/home" getComponent={(nextState, callback) => {
    require.ensure([], require => {
        callback(null, require("./containers/home"));
    }, "Home");
}} />
<Route path="/about" getComponent={(nextState, callback) => {
    require.ensure([], require => {
        callback(null, require("./containers/about"));
    }, "About");
}} />