React/Webpack：如何通过代码清理使动态 import/require 依赖于变量？

Question

我有 "react-create-app" 使用最新的 React 16.12 和 Webpack 创建的 React 应用程序

我需要依赖变量进行导入，喜欢它：

    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/zzz，而不依赖于 SOMEVAR

我无意中发现，当我使用 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（我需要在内部构建仅在我的 [=24 之后使用的模块=])?怎么运行的？我在 "WebPack docs".

中找不到有关此效果的任何信息

Answer 1

根据提供的示例，我认为这不是最佳方法。

您可以定义一个动态插件，将自定义全局变量公开给构建。添加到你的 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;

React/Webpack：如何通过代码清理使动态 import/require 依赖于变量？

React/Webpack: How to make dynamic import/require depend of variable with code cleanup?

javascript

typescript

reactjs

webpack

react-create-app