如何在客户端JS脚本中使用环境变量（含Webpack配置示例）

我有一个HTML文件和一个JavaScript文件，JS中的fetch请求需要使用密钥，已将密钥存入.env文件，希望通过HTML的script标签引入该JS脚本并正常运行，相关代码及配置如下，求解决方法：

现有代码及配置 #

JS代码（applicant.js） #

document.getElementById('getstarted').addEventListener('click', () => {
  const applicanturl = 'https://api.sumsub.com/resources/applicants';
  const applicantoptions = {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'X-App-Token': process.env.Token
    },
    body: JSON.stringify({
      externalUserId: '1234EERF', // 你这边注册的唯一申请人标识
      email: 'vitaimiosior@gmail.com'
    })
  };

fetch(applicanturl, applicantoptions)
  .then(res => {
    res.json()
  })
  .then(json => {
    console.log(json)
  })
  .catch(err => console.error('error:' + err));
})

HTML原引入方式 #

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

webpack.config.js配置 #

const path = require('path');
const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './src/applicant.js',  // 你的入口文件路径
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    fallback: {
      "path": require.resolve("path-browserify"), // 添加此行
    },
  },
  plugins: [
    new Dotenv(),
  ],
  mode: 'development', // 或 'production'
};

解决步骤 #

1. 安装依赖
   在项目根目录执行命令安装所需包：

   npm install webpack webpack-cli dotenv-webpack path-browserify --save-dev
   

2. 配置.env文件
   在项目根目录创建.env文件，写入你的密钥：

   Token=你的实际密钥内容
   

3. 修复JS代码的fetch逻辑
   原代码中第一个then未返回res.json()，导致第二个then无法获取数据，修改如下：

   fetch(applicanturl, applicantoptions)
     .then(res => res.json()) // 直接返回res.json()
     .then(json => {
       console.log(json)
     })
     .catch(err => console.error('error:' + err));
   

4. 执行webpack打包
   在项目根目录执行打包命令：

   npx webpack
   

   执行后会在dist目录生成bundle.js。

5. 修改HTML的script引入路径
   将原引入路径改为打包后的bundle.js（根据实际项目结构调整路径）：

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

完成以上步骤后，点击页面上id为getstarted的元素，fetch请求就能正确携带.env中的密钥发起请求了。

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