如何在package.json的build脚本中读取.env文件的环境变量？

方案1：*POSIX系统（macOS/Linux）*直接用shell加载.env #

修改package.json里的build脚本，在开头加上source .env &&，即可将.env中的变量加载到当前shell环境，后续Node.js命令能直接读取process.env.MY_APP_GTAG：

"scripts": {
  "build": "source .env && node increment-build.js && npm run build-css && node scripts/build.js"
}

方案2：跨平台兼容（支持Windows/macOS/Linux） #

使用dotenv-cli包统一处理.env加载，规避不同系统的shell语法差异：

1. 安装依赖：

npm install --save-dev dotenv-cli

2. 修改build脚本：

"scripts": {
  "build": "dotenv -- sh -c 'node increment-build.js && npm run build-css && node scripts/build.js'"
}

也可拆分每个Node.js命令前添加dotenv --：

"scripts": {
  "build": "dotenv -- node increment-build.js && npm run build-css && dotenv -- node scripts/build.js"
}

为什么你之前的写法无效？ #

你尝试的export MY_APP_GTAG=${process.env.MY_APP_GTAG}不生效的核心原因：

• npm脚本默认不会自动加载.env文件，shell环境中不存在MY_APP_GTAG变量；且${process.env.MY_APP_GTAG}是Node.js语法，shell无法识别，会被解析为空值。
• 即使加载了.env，shell变量无需手动export（除非.env中未声明导出），source .env后变量会自动进入shell环境，Node.js进程会直接继承这些环境变量到process.env。

额外注意事项 #

确保index.html的占位符替换逻辑能正确读取环境变量：

• 若使用Webpack、Vite等构建工具，需确认配置已开启环境变量注入（如Webpack的DefinePlugin、Vite自动加载.env的机制）。
• 若为自定义替换脚本，需在脚本中通过process.env.MY_APP_GTAG获取值，再替换%MY_APP_GTAG%占位符。

内容的提问来源于stack exchange，提问作者Nick