npm 包 json-env-extract 使用教程

在前端开发中，我们经常需要对配置文件进行管理。而对于不同的环境，如开发、测试、预发、生产等，我们可能需要用不同的配置参数。为了更方便地管理这些参数，我们可以使用一个叫做 json-env-extract 的 npm 包。

该包可以帮助我们从一个 JSON 配置文件中提取出特定环境所需的值，并自动生成一个新的 JSON 文件，以供我们在代码中使用。本篇文章将为您介绍如何使用 json-env-extract。

安装和使用

1. 安装

使用 npm 安装该包：

npm i json-env-extract --save-dev

1. 配置

在 package.json 文件中，添加一个名为 extract 的 script，如下所示：

{
  "scripts": {
    "extract": "node node_modules/json-env-extract/index.js -e <env> -f ./config/config.json -o ./config/env.json"
  }
}

其中 -e 表示环境变量名，对应于在 JSON 配置文件中的键名。-f 表示要提取值的 JSON 配置文件的路径，-o 表示要生成的包含该环境变量的 JSON 文件的路径。

1. 运行

使用以下命令来提取特定环境所需的值并生成新的 JSON 文件：

npm run extract -- -e <env>

其中 <env> 表示特定的环境名，例如 dev、prod 等。

示例

假设我们有一个 JSON 配置文件 config.json，其内容如下所示：

-- -------------------- ---- -------
-
  ---------- -
    --------- --------------------------
    -------- ------
    ---------- -----
  --
  ------ -
    -------- ----
  --
  ------- -
    --------- -----------------------------
    ---------- -----
  -
-

我们想要提取出 dev 环境所需的值并生成新的 JSON 文件。

1. 在 package.json 文件中，添加以下 script：

{
  "scripts": {
    "extract": "node node_modules/json-env-extract/index.js -e dev -f ./config/config.json -o ./config/env.json"
  }
}

1. 在终端中运行以下命令：

npm run extract -- -e dev

1. 得到新的 JSON 文件 env.json，其内容如下所示：

{
  "apiUrl": "https://api.example.com",
  "debug": true,
  "timeout": 10000
}

在代码中，我们可以将这些变量保存在一个单独的文件中，例如 config.js，并按照以下方式使用它们：

import env from './config/env.json';

const apiUrl = env.apiUrl;
const debug = env.debug;
const timeout = env.timeout;

这样，我们就可以根据不同的环境来选择不同的值，同时也可以更方便地对配置信息进行管理。

指导意义

使用 json-env-extract 可以为前端开发者带来以下的好处：

1. 更好地进行配置信息管理，使得代码更加易于维护；
2. 不同的环境可以拥有不同的配置参数，以满足各种要求；
3. 自动生成包含指定环境所需值的 JSON 文件，节省手动操作的时间和精力；
4. 能够提高开发效率和可维护性。

总之，json-env-extract 是一个非常有用的 npm 包，可以让前端开发更加高效和轻松。希望本文能对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f84238a385564ab6c27