前言
在前端开发中，我们经常需要在不同的环境下进行部署和测试。对于一些敏感信息（如 API 地址、密钥等等），我们需要在不同的环境中使用不同的配置。这时候，我们会使用环境变量来管理这些配置。
在本文中，我们将介绍一个可以帮助我们在不同的环境中使用不同的配置的 npm 包，env-builder-cli。
简介
env-builder-cli 可以帮助我们在不同的环境中使用不同的配置，而不需要手动修改配置文件。通过简单的命令行操作，我们可以在不同的环境中打出不同的构建包。同时，它可以很好地与 webpack 集成，为我们提供更加便利的构建体验。
安装
在使用 env-builder-cli 之前，我们需要先安装它。
npm install env-builder-cli --save-dev
使用
配置文件
在使用 env-builder-cli 之前，我们需要在项目根目录下创建一个名为 .env-builder.json 的文件，用于存放不同环境下的配置。示例 .env-builder.json 文件内容：
-- -------------------- ---- -------
-
-------------- -
--------------- ---------------------
---------- ------------------
--
------------- -
--------------- -----------------
---------- -------------------
-
-打包命令
在配置文件中设置好不同的环境和相关的配置之后，我们可以使用 env-builder-cli 打包命令进行打包。
env-builder-cli build <env>
其中 <env> 表示环境名，必填。
例如，在开发环境下打包，可以使用以下命令：
env-builder-cli build development
集成 webpack
我们可以将 env-builder-cli 与 webpack 集成，使得在打包时可以实现自动切换环境并打包。我们需要在 webpack 配置文件中添加以下内容：
-- -------------------- ---- -------
----- ---------- - ---------------------------
-------------- - --- -- -
------------------------
------ -
-- ------- --
-
-其中，envBuilder.loadEnv(env) 用来加载对应的环境配置。
我们还需要在项目根目录下的 .env 文件中配置当前环境名：
ENV=development
示例代码
下面是一个简单的示例，展示如何将 env-builder-cli 与 webpack 集成：
-- -------------------- ---- -------
----- ---------- - ---------------------------
-------------- - --- -- -
------------------------
------ -
------ ---------------
------- -
--------- ------------
----- ------
-
-
-结语
通过使用 env-builder-cli，我们可以很好地管理不同环境下的配置，并实现自动化打包切换。同时，它还可以很好地与 webpack 集成，为我们提供更加便利的构建体验。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e21a563576b7b1ece42