介绍
env-loader 是一个可以帮助我们加载环境变量的 npm 包。在前端的开发过程中，我们经常需要根据当前环境的不同加载不同的配置信息，如 API 地址、CDN 地址、打包文件名等。而 env-loader 就是专门用来加载这些环境变量的工具。
为什么需要 env-loader？
在前端开发中，我们通常需要根据当前环境的不同加载不同的配置信息。比如，
- 开发环境需要连接本地的后端服务，而测试和生产环境需要连接不同的服务器；
- 开发环境需要使用本地的静态资源服务器，而测试和生产环境需要使用 CDN；
- 打包文件名需要根据每个环境的不同而不同，以便在缓存更新时能够正确地获取最新的代码。
为了实现这些功能，我们需要在不同的环境中设置不同的环境变量，然后根据这些环境变量来加载不同的配置信息。而 env-loader 就是帮助我们加载这些环境变量的工具。
env-loader 的功能
env-loader 主要有以下几个功能：
- 自动加载
.env文件； - 支持
.env文件中的注释、空行和空格； - 支持
.env文件中的变量替换； - 支持在 JS 中使用
process.env访问环境变量。
安装
安装 env-loader 是非常简单的，只需要在项目目录中运行以下命令：
npm install env-loader --save-dev
使用方法
创建 .env 文件
首先，我们需要在项目根目录中创建一个名为 .env 的文件，并在文件中设置我们需要的环境变量，如下所示：
# API 地址 API_URL=http://localhost:3000 # CDN 地址 CDN_URL=https://cdn.example.com # 打包文件名 FILE_NAME=app.[hash].js
.env 文件中使用了注释和空行，这些都不会影响 env-loader 的解析。
在 JS 中使用环境变量
env-loader 会自动将 .env 文件中的环境变量注入到 Node.js 的进程变量 process.env 中。我们可以在 JS 中通过 process.env 访问这些环境变量。
例如，我们可以通过以下代码在 JS 中使用 API 地址：
// app.js console.log(process.env.API_URL);
使用变量替换
.env 文件中还支持使用变量替换，格式为 ${VAR_NAME}。env-loader 会将 ${VAR_NAME} 替换为 VAR_NAME 变量的值。
例如，我们可以通过以下代码在 JS 中使用带有变量替换的配置信息：
# API 地址
API_URL=http://${HOST}:3000// app.js
const API_URL = process.env.API_URL.replace('${HOST}', 'localhost');
console.log(API_URL);总结
env-loader 是一个非常实用的 npm 包，它可以帮助我们方便地管理不同环境的配置信息。通过 env-loader，我们可以在不同环境中自动加载环境变量，并在 JS 中使用这些环境变量。希望这篇文章能够对大家在前端开发中使用 env-loader 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e25a563576b7b1ece6b