environment-variables - 使用webpack开发和生产环境变量

Question

对于使用诸如Webpack及其亲戚之类的构建工具的世界来说，我是一个新手，所以也许这个问题有点笨拙，但请理解我。

背景:我正在开发一个客户端Web应用程序(使用reactjs + redux)，并使用webpack作为构建工具和开发服务器加载器。现在，我只需要在开发环境中进行一些代码行(记录和填充)。因此，我在网上看到了webpack.DefinePlugin插件用于设置process.env.NODE_ENV变量的用法，其代码如下所示:

plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
        })
] 

然后，如果未在我的机器上设置 NODE_ENV varibale(目前尚未设置)，它将自动设置为开发。我对吗？

那生产机器呢？我需要在 /etc/environment文件中将此环境变量设置为'production'吗？

然后另一个问题是，当我为应用提供服务时，webpack如何知道NODE_ENV是什么？在生产机器上进行构建并在构建的bundle.js中进行设置时，它会被编译吗？ ( $ webpack --progress -p)

另一个问题是如何在生产或开发环境中启用/禁用功能？只是做一个if条件语句，像这样:

if(process.env.NODE_ENV == 'development'){
    console.log('this is visible in development');
}

最后一个，如果这是webpack真正的功能，是否会将这段代码转换为内置的bundle.js？如果是这样，对最终用户可见吗？有什么关系吗？

希望不是很多，谢谢一堆!

Answer 1

在生产机器上，您可以使用以下命令构建脚本

NODE_ENV=production webpack

另一方面，将此变量传递给 /etc/environment也是解决方案。
process.env.NODE_ENV在 bundle.js中转换为静态字符串

例如，如果您在此代码段上运行 NODE_ENV=production webpack

if(process.env.NODE_ENV == 'development'){
    console.log('this is visible in development');
}

在 bundle.js中，您会找到 (已编辑)

if ('production' == 'development') {
    console.log('this is visible in development');
}

if (false) { // 'production' == 'development'
    console.log('this is visible in development');
}

因此，根据有关 启用/禁用功能的问题，您的代码有效。

如果要删除条件项(如果为假)(例如，在上面的示例中，您不想在 console.log('this is visible in development');环境中显示 production)，则应使用

new webpack.optimize.UglifyJsPlugin()

它将删除所有带有 false条件的if语句。