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文件中将此env变量设置为“production”？

然后另一个问题是webpack在我提供应用程序时如何知道NODE_ENV是什么？当我在生产机器上进行构建并在内置的bundle.js中设置时编译？（$ webpack --progress -p）

另一个问题是如何在生产或开发环境中启用/禁用功能？只需执行这样的条件语句：

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语句。

在开发和生产上使用webpack的环境变量

1 个答案: