React使用dotenv-cli执行build-env未生成未压缩开发版JS如何解决

问题原因 #

react-scripts 的 build 命令默认强制将 NODE_ENV 设为 production，即使你通过 dotenv 加载了 .env.development 的环境变量，webpack 还是会执行生产环境的压缩、混淆逻辑，所以不会生成未压缩的开发版本产物。

修复步骤 #

1. 先安装 cross-env 工具，用于跨平台设置 Node 环境变量，避免不同操作系统环境变量语法不一致的问题：

npm install cross-env --save-dev

2. 修改 package.json 中的 build-env 脚本，显式指定 NODE_ENV 为 development：

"build-env": "cross-env NODE_ENV=development dotenv -e .env.development react-scripts build && rmdir /s E:\\bar\\foo-framework\\runtime\\base-component\\webroot\\screen\\webroot\\rclient && move build E:\\bar\\foo-framework\\runtime\\base-component\\webroot\\screen\\webroot\\rclient"

如果你仅在Windows环境运行，不需要跨平台兼容，也可以不用安装cross-env，直接修改脚本为：

"build-env": "set NODE_ENV=development&& dotenv -e .env.development react-scripts build && rmdir /s E:\\bar\\foo-framework\\runtime\\base-component\\webroot\\screen\\webroot\\rclient && move build E:\\bar\\foo-framework\\runtime\\base-component\\webroot\\screen\\webroot\\rclient"

注意set后等号两边不要留空格，&&前也不要留空格，避免环境变量值带入多余空格失效。

3. （可选）如果需要保留源码映射文件，可以在 .env.development 中添加配置：

GENERATE_SOURCEMAP=true

4. 重新执行构建命令即可得到未压缩的开发版本产物：

npm run build-env

补充说明 #

你当前的运行环境信息如下：

如果修改后仍然有问题，可以检查项目根目录是否存在 .env.development 文件，文件内的变量格式是否符合 dotenv 的要求。

内容的提问来源于stack exchange，提问作者Đỗ Như Vỹ