process.env环境变量动态替换方案踩坑记录

前言

今天早上阅读几年前写的一段代码时，突然对其是否生效产生了怀疑，这段代码如下：

令我困惑的是：这里动态获取 process.env 上的属性是否生效？

先说结论：

这个项目使用的是 [email protected]，采用基于 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 写法

经过 webpack 编译打包后的代码如下，其中