Typescript / Webpack 检查是否通过生产配置运行答案

【问题标题】：Typescript / Webpack check if running via Production configTypescript / Webpack 检查是否通过生产配置运行
【发布时间】：2018-09-13 07:33:57
【问题描述】：

我正在使用webpack, reactjs, typescript。在我的.tsx 代码中，我有一个要求，我需要根据我的环境（即生产或开发）路由到 URL。那么，如何检查环境并动态加载正确的 URL？

【问题讨论】：

使用环境变量是一种选择 - webpack.js.org/guides/environment-variables
这将如何帮助dynamically，即在实际代码执行期间？ Config 仅在build process 期间使用。如果可能的话，您能否详细说明一下？
嗨@AngshumanAgarwal，你有什么成就吗？我想对我的回答有一些反馈
感谢您的回答 - 进行了更多研究，发现 webpack 也很好地记录了它 - webpack.js.org/guides/production
@AngshumanAgarwal 哇，太酷了。我不知道。打算把它应用到我的项目中哈哈

标签： javascript typescript webpack

【解决方案1】：

您可以添加一个插件来定义一个可以在代码中访问的环境变量，如下所示：

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
})

然后在您的代码中，您只需检查process.env.NODE_ENV。

不用说，您可以使用可以通过 cli 传递的环境变量来管理插件，如下所示：

webpack --env.production

然后让你的webpack.config.js 像这样：

module.exports = function(env) {
    return {
        /*[...]*/
        plugins: [new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(env.production ? 'production' : 'development')
        })]
        /*[...]*/
    };
};

来源：这就是 react 的工作原理 :-)

【讨论】：

谢谢 - 会试一试。我的理解是因为 NODE_ENV 环境变量和相应的 process.env.NODE_ENV 运行时字段是严格特定于节点的概念，默认情况下客户端代码中不存在该值。看起来 DefinePlugin 强制它成为一个全局变量？
@AngshumanAgarwal 没错，DefinePlugin 使得在任何环境中运行的任何 webpack 包代码中都将具有定义的变量。
希望 UglifyJS 在缩小过程中不会将其作为死代码分支删除，因为它会遇到 if("production" !== "production") where process.env.NODE_ENV = "production" -- 在构建过程中从 cli 设置。跨度>
@AngshumanAgarwal 这没有问题，好像永远无法到达分支，您不需要其中的代码。剥离它以减少捆绑大小实际上很好。
使用“require”导入对我有用：new (require('webpack')).DefinePlugin({ ...