使用Browserify时环境变量显示undefined的问题求助

项目文件结构 #

MyProject
    dist
    node_modules
    src
        index.html
        index.js
        bundle.js
    .env
    package-lock.json
    package.json
    yarn.lock

相关文件内容 #

index.html #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

<div class="d-flex align-items-center justify-content-center" id="record">
    <div class="input-group mb-3 input-group-lg w-50">
      <input type="text" class="form-control" id="rec-id" placeholder="Enter ID">
      <button class="btn btn-success" id="mybtn" type="button">Enter</button>
    </div>
</div>

<div class="d-flex align-items-center justify-content-center d-none" id="show-alert">
    <div class="alert alert-danger alert-dismissible fade show row">
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      <strong>Danger!</strong> Button was clicked
    </div>
  </div>


<script src="bundle.js"></script>

index.js #

require("dotenv").config();
console.log(process.env.MY_TOKEN);

.env #

MY_TOKEN=qwer123456

已执行操作 #

成功执行打包命令：

browserify src/index.js -o src/bundle.js

问题 #

运行代码时，控制台输出undefined而非预期的qwer123456

解决步骤 #

• 安装envify和dotenv开发依赖：

  npm install envify dotenv --save-dev
  

• 修改打包命令，通过envify插件注入环境变量：

  browserify -t envify src/index.js -o src/bundle.js
  

  也可以在package.json的scripts中配置打包命令，方便后续调用：

  {
    "scripts": {
      "build": "browserify -t envify src/index.js -o src/bundle.js"
    }
  }
  

  执行npm run build即可完成打包。

• 移除index.js中的require("dotenv").config()，修改后代码如下：

  console.log(process.env.MY_TOKEN);
  

原理说明 #

浏览器环境不存在Node.js的process对象，直接使用dotenv无法读取环境变量。envify会在Browserify打包过程中，将代码里的process.env.XXX直接替换成.env文件中对应的实际值，从而让浏览器端能正确获取到环境变量内容。

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