对于使用诸如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?如果是这样,对最终用户可见吗?有什么关系吗?
希望不是很多,谢谢一堆!
最佳答案
在生产机器上,您可以使用以下命令构建脚本
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语句。
关于environment-variables - 使用webpack开发和生产环境变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38183285/