Browserify打包后dotenv变量显示undefined问题求助

核心原因 #

浏览器环境本身不存在Node.js的process对象，直接用dotenv加载的process.env变量，在Browserify打包后无法被浏览器识别，自然会显示undefined。下面是几种可行的解决方法：

方法1：用envify转换插件替换变量 #

envify的作用是把代码里的process.env变量替换成实际的环境变量值，打包后直接嵌入浏览器可识别的代码：

1. 先安装依赖：

   npm install envify --save-dev
   

2. 确保你的apiKey.js里已经正确引入dotenv：

   require('dotenv').config();
   // 后续使用process.env.GOOGLE_MAPS_API_KEY加载地图脚本
   

3. 修改打包命令，加上envify转换：

   browserify -t envify apiKey.js -o api_key_bundle.js
   

   执行命令前确认.env文件在项目根目录，且GOOGLE_MAPS_API_KEY已正确配置。

方法2：使用browserify-dotenv专用插件 #

这个插件是为Browserify量身定制的dotenv处理工具，配置更简单：

1. 安装插件：

   npm install browserify-dotenv --save-dev
   

2. 直接用插件打包：

   browserify -t browserify-dotenv apiKey.js -o api_key_bundle.js
   

   插件会自动读取根目录的.env文件，把对应变量替换进打包后的代码。

方法3：命令行直接注入变量（简单场景适用） #

如果不想安装额外插件，可在打包时直接通过命令行传递密钥：

GOOGLE_MAPS_API_KEY=你的实际密钥 browserify apiKey.js -o api_key_bundle.js

代码里依然用process.env.GOOGLE_MAPS_API_KEY调用，envify会自动完成替换（需提前安装envify）。

注意事项 #

• 务必把.env文件加入.gitignore，避免密钥泄露到版本仓库。
• 打包完成后可以打开api_key_bundle.js检查，确认密钥已被正确替换，而非保留process.env相关代码。

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