在前端开发中，我们经常需要获取当前环境的一些配置信息，如：区分开发环境和生产环境、获取 API 请求的基础路径等等。而 @moped/plugin-env 这个 npm 包就是帮助我们管理环境的工具。
本文将介绍如何安装和使用 @moped/plugin-env，帮助大家更好地管理前端应用的环境。
安装
使用 npm 安装 @moped/plugin-env：
npm install @moped/plugin-env --save-dev
保存至 devDependencies 中，因为它只会在开发环境中使用。
使用
@moped/plugin-env 提供了一个 env.js 文件，该文件会被 webpack 所读取并执行。我们只需要在 webpack 中配置启用该插件，就能方便地使用它提供的方法了。
配置插件
在 webpack 中使用插件，我们需要通过 plugins 属性启用，并在其中添加 @moped/plugin-env 这个插件，如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ----- - - -------------------------
----- ----------------- - -------------------------------
----- - --------- - - -----------------------------
-------------- - ------------------- -
----- -------------
------- -
----- ----------------------- -----------
--------- ----------------------------
--
-------- -
--- -------------------
--------- ---------------
------- -------
---
--- ------------
-
---其中 new EnvPlugin() 就是启用了 @moped/plugin-env 插件。
获取环境变量
在 env.js 文件中，@moped/plugin-env 会自动读取当前环境变量的值，并提供了一个 env() 方法来获取这些值：
console.log(env('NODE_ENV'));该方法接收一个参数：键名，返回该键名所对应的值。
我们可以使用这个方法获取当前环境变量的值，并根据不同值所需要做的不同处理：
const BASE_URL = env('NODE_ENV') === 'production'
? 'https://www.production.com/api'
: 'https://www.development.com/api';
console.log(BASE_URL);这里判断当前环境是生产环境还是开发环境，并根据环境变量的不同设置不同的 API 基础路径。
配置环境变量
在使用 @moped/plugin-env 时，我们需要在项目中配置一些环境变量。这里提供两种配置方式：.env 文件和环境变量。
.env 文件
@moped/plugin-env 支持创建 .env 文件来设置环境变量。创建 .env 文件，将变量名和值一行一行地写入即可：
NODE_ENV = development API_URL = https://www.development.com/api
然后，在启动应用时，在命令前加上 dotenv 就可以将这些变量引入到应用中：
dotenv npm start
这样就可以在应用中使用 env 方法获取这些环境变量了。
环境变量
我们也可以像平常一样将环境变量添加到命令中：
NODE_ENV=development API_URL=https://www.development.com/api npm start
这样在应用中同样可以使用 env 方法获取这些环境变量了。
示例
这里提供一个使用示例，演示如何获取环境变量和设置基础路径。
环境变量设置
在命令行中设置环境变量：
NODE_ENV=development API_URL=https://www.development.com/api npm run serve
webpack 配置
-- -------------------- ---- -------
----- ---- - ----------------
----- - ----- - - -------------------------
----- ----------------- - -------------------------------
----- - --------- - - -----------------------------
-------------- - ------------------- -
----- --------------
------- -
----- ----------------------- --------
--------- ------------
--
---------- -
------------ -------------------- --------
----- ----
--
-------- -
--- -------------------
--------- ---------------
------- -------
---
--- ------------
-
---支持库
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --- - ---- -------------------- ----- -------- - --------------- ----- ---- - -------------- -------- -------- --- ------ ------- -----
在代码中，通过 env 方法获取环境变量，根据变量名获取对应值了。
结论
moped/plugin-env 这个 npm 包可以帮助我们管理环境，使用它可以更好地完成前端应用的开发和部署。本文介绍了如何安装与使用 @moped/plugin-env，以及配置环境变量。希望本文可以帮助大家更好地使用 @moped/plugin-env。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1d6cbf403f2923b035c585