在我的package.json
中,我正在运行如下脚本:
"build-dev": "webpack-dev-server --content-base src --inline --hot -p --define process.env.NODE_ENV='\"dev\"' --progress --colors -p --define process.env.REACT_APP_GAMESHOW_URL='\"http://api.gameshow.com/contestants\"' --progress --colors"
它有效。
基本上我只是想运行 webpack 并定义一些环境变量:
webpack-dev-server --content-base src --inline --hot
process.env.NODE_ENV=dev
process.env.REACT_APP_GAMESHOW_URL=http://api.gameshow.com/contestants
但是,我多次使用这些参数:-p --define --progress --colors
有没有办法可以压缩代码,使其不重复?
类似于:
-p --define process.env.NODE_ENV='\"dev\"' && process.env.REACT_APP_GAMESHOW_URL='\"http://api.gameshow.com/contestants\"' --progress --colors"
我尝试了很多方法,但都不起作用
最佳答案
重复像 --progress
和 --colors
这样的标志不会执行任何操作,就像您只使用过一次一样。 --define
选项可以多次使用来定义多个值,并且完全独立于您使用的任何其他标志/选项。
您可以在 webpack 配置中定义这些选项,而不是使用命令行选项。等效的 DefinePlugin
是:
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('dev'),
REACT_APP_GAMESHOW_URL: JSON.stringify('http://api.gameshow.com/contestants'),
}
})
]
由于它只是 JavaScript,因此还允许您使用 JSON.stringify()
,从而摆脱繁琐的转义和在引号内使用引号。根据您的环境,可以通过多种方式更改这些值。
- 使用
--config path/to/config.js 指定的单独配置
- Exporting a function to use
--env
- 环境变量,例如
NODE_ENV=生产 webpack-dev-server [选项]
例如,您可能只有一个用于开发的 URL 和一个用于生产的 URL,因此您可以按照以下方式执行操作:
const isProd = process.env.NODE_ENV === 'production';
const env = isProd ? 'production' : 'dev';
const url = isProd ? 'http://api.gameshow.com/contestants' : 'http://localhost:3000/contestants';
module.exports = {
// Rest of your config
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(env),
REACT_APP_GAMESHOW_URL: JSON.stringify(url),
}
})
]
};
请注意它如何始终检查 NODE_ENV
是否为 生产
,因此,如果您根本不定义 NODE_ENV
,则默认为开发值,在开发过程中删除另一个命令行选项。使用此配置,您可以运行以下代码进行开发:
webpack-dev-server --content-base src --inline --hot --progress --colors
对于生产,您只需添加 NODE_ENV=product
和 -p
:
NODE_ENV=production webpack-dev-server -p --content-base src --inline --hot --progress --colors
不要在开发中使用-p
,这是生产标志,在开发中使用绝对没有帮助。请参阅Building for Production
了解更多信息。
如果您愿意,还可以配置当前在命令行上指定的其他选项,例如 stats.colors
或devServer.contentBase
.
关于javascript - 打包json脚本运行多个环境变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43527780/