时间戳

首页 > 解决方案 > React/Webpack：如何通过代码清理使动态导入/要求依赖于变量？

javascript - React/Webpack：如何通过代码清理使动态导入/要求依赖于变量？

问题描述

我已经使用最新的 react 16.12 和 Webpack 创建了由“react-create-app”创建的应用程序

我需要依赖变量进行导入，例如：

    if (process.env.SOMEVAR === "a1") Routes = require("./xxx").default;
    if (process.env.SOMEVAR === "a2") Routes = require("./yyy").default;
    if (process.env.SOMEVAR === "a3") Routes = require("./zzz").default;

运行命令：set "SOMEVAR=a1" && npm run build

这段代码将main.chunk.js与这3个模块xxx//里面，没有yyy依赖zzzSOMEVAR

我意外地发现，当我使用NODE_ENV变量名时 -它就像我需要的那样工作！例子：

    if (process.env.NODE_ENV === "production") Routes = require("./xxx").default;
    if (process.env.NODE_ENV === "development") Routes = require("./yyy").default;
    if (process.env.NODE_ENV === "test") Routes = require("./zzz").default;

运行命令：set "NODE_ENV=production" && npm run build

此代码将main.chunk.js 仅包含 xxx 模块！

问题：如何使任何其他变量具有相同的效果，而不是NODE_ENV（我需要在内部构建仅在我之后使用的模块if）？这个怎么运作？我在“WebPack docs”中找不到有关此效果的任何信息。

标签： javascriptreactjstypescriptwebpackreact-create-app

解决方案

从提供的示例中，我认为这不是最好的方法。

您可以定义一个动态插件，将自定义全局变量公开给构建。添加到您的 webpack 插件配置中，例如：

new webpack.DefinePlugin({
    EnabledRoutes: {
        testing: true,
        production: true,
        development: true
    }
})

通过这种方式，您可以使用流程环境或读取构建配置，如下所示：

new webpack.DefinePlugin({
    EnabledRoutes: {
        testing: process.env.ROUTES_TESTING,
        production: Config.routes.production,
        development: true
    }
})

并且直接在客户端路由器中，您可以检查以添加其他路由：

if(EnabledRoutes.testing)
{
    APPEND routes.
}

或者

if (EnabledRoutes.testing) Routes = require("./xxx").default;

推荐阅读