前言
今天早上阅读几年前写的一段代码时,突然对其是否生效产生了怀疑,这段代码如下:
令我困惑的是:这里动态获取 process.env
上的属性是否生效?
先说结论:
这个项目使用的是 react@16.13
,采用基于 webpack
的 react-app-rewired
脚手架工具构建,这种动态取值写法是生效的。
我的困惑
在我印象中,在项目中使用 process.env
上的环境变量不能使用这种动态取值写法,必须使用下面这种写法
// 我印象中的正确写法
const baseURL = process.env.REACT_APP_XXX_BASICPATH
并且,不能对 process.env
进行解构
// 我印象中的错误写法
const { REACT_APP_XXX_BASICPATH } = process.env
必须用 process.env.REACT_APP_XXX_BASICPATH
这种写法的原因:
webpack 在打包构建项目时,会分析源代码中的 process.env.XXX
所有的这种写法,并且用 webpack 编译时的 process.env
相应的值去替换源代码。
例如:
const baseURL = process.env.REACT_APP_XXX_BASICPATH
webpack 编译替换后的结果:
// 这是示例,实际上代码还会被 webpack 压缩
const baseURL = 'https://xxx.com/xxx/'
代码验证
1.react 项目
使用 process.env.XXX
写法