javascript - 使用 React Router 和 Webpack 2 如何仅在某些路由上需要外部库？

转载作者：可可西里更新时间：2023-11-01 01:26:11

目前工作

使用 Webpack 2 和 React Router v4 我已经能够设置工作代码拆分。中间有个<AsyncComponent>解决 promise 并返回组件(在 github 问题上找到的模式)。

下面的一组示例路由:

<Switch>
    <Route 
        path="me" 
        render={(props) => 
            <AsyncComponent promise={ require.ensure([], (require) => require('./modules/Profile'), 'profile') } props={props} />
        } 
    />
    <Route 
        path="credit-card" 
        render={(props) => 
            <AsyncComponent promise={ require.ensure([], (require) => require('./modules/CreditCard'), 'credit-card') } props={props} />
        } 
    />
</Switch>

目标

我想进一步扩展，并且对于仅某些路线，加载额外的库。在上面的示例中，我想在信用卡路由上只获取StripeJS ( https://js.stripe.com/v2/ ) 库。

我想强调的是，我可以将 Stripe 直接加载到页脚中，并且一切正常。有多个库，我使用 Stripe 作为一个易于理解的示例。

已尝试

以下尝试收效甚微:

在 webpack 配置中将库标记为外部。这(正确地)将库标记为外部库，并且不会尝试在 require 的解析序列期间将其捆绑。然而，期望是手动引入库。
我想过使用伪脚本加载器的想法(当到达该路径时，手动创建一个带有 <script> 属性的 src，等待它加载，然后让组件执行它的操作。这行得通好的，但是从可维护性(如果需要两个或更多库，那么我需要复制笨拙的手册 script 加载)的 Angular 来看，这真的很糟糕，而且似乎与 webpack 的“方式”背道而驰。

配置的相关部分

const core = [
    'lodash',
    'react',
    'react-dom',
    'axios',
    'react-router-dom',
];

const config = {
    context: path.resolve(__dirname, './ts_build'),
    node: {
        fs: "empty"
    },
    entry: {
        app: './app.js',
        core: core,
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[name].[id].chunk.js',
        path: path.resolve(__dirname, './../../public'),
        publicPath: 'http://example.org/',
    },
    resolve: {
        modules: [
            path.resolve('./src'),
        ],
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['core'], 
            minChunks: Infinity,
        }),
        new webpack.NamedModulesPlugin(),
    ],
};

最佳答案

https://github.com/hinok/webpack2-react-router-code-splitting

存储库包含webpack2 + react-router v4 + 使用动态实现的code splitting import()并使用 loadjs 按需加载一次外部库.例如，它为特定路由加载 Stripe.js。

在存储库中你可以找到两种代码拆分的方法

它基于 Andrew Clark 的官方 Webpack 文档和要点

在准备该存储库时，我发现@Chris 只想为托管在外部 CDN 上的某些路由加载 Stripe.js。从那时起，我一直在考虑同时使用 AMD 模块并避免泄漏全局变量的最佳方法，但这有点棘手，因为每个 AMD 模块可能有不同的包装器，我说包装器的意思是这样的:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['b'], function (b) {
            return (root.amdWebGlobal = factory(b));
        });
    } else {
        root.amdWebGlobal = factory(root.b);
    }
}(this, function (b) {
    return {};
}));

我可以说 UMD包装器是一种标准，但有时人们更喜欢不那么自以为是的包装器，或者他们只是不关心其他环境。我提到它是因为在 git 历史中，你可以找到 commit called Amdify这更多地证明了如何模拟 AMD env 的概念。最后我决定删除它，因为它远非理想，而且它没有涵盖所有用法和边缘情况。

我找不到任何有关集成外部 AMD 模块或以某种方式将 AMD 模块与 webpack 结合使用的信息。相反我发现它根本行不通

@mc-zone you should be able to load AMD modules with script.js. But this has nothing to do with webpack, it just works because AMD was designed for this. Thus you won't be able to use webpack features inside these AMD modules. webpack requires static analysis on build time.

@jhns see on github