在前端开发中，我们经常需要使用代理工具来进行调试。而 hiproxy 是一款非常好用的代理工具，它支持多种协议，内置了多种插件和中间件，并支持代理规则的管理。虽然 hiproxy 的配置十分灵活，但是对于初次使用的人来说可能会有些困难。因此，本文将介绍一款帮助我们更轻松地编写 hiproxy 配置的 npm 包—— hiproxy-conf-parser。
hiproxy-conf-parser 是什么？
hiproxy-conf-parser 是一款用于解析 hiproxy 配置文件（hiproxy.config.js）的 npm 包，它可以将我们编写的 hiproxy 配置转化为 hiproxy 自己能够识别的配置文件。通过 hiproxy-conf-parser，我们可以更简单、更方便地编写 hiproxy 的配置文件。
hiproxy-conf-parser 的用法
接下来，我们会根据一个具体的例子来介绍 hiproxy-conf-parser 的用法。在此之前，我们需要了解一下 hiproxy 配置文件的格式和一些配置项的含义。
hiproxy 配置文件
hiproxy 配置文件的默认文件名为 hiproxy.config.js，它遵循 CommonJS 的模块规范。一个典型的 hiproxy 配置文件可能是这样的：
-- -------------------- ---- -------
-------------- - -
------- -
----- -----
--
------- --
----- ----
------ -
-- ------ ---------------------- -
---- -------------------------
--
---
--上面的配置文件中，server 表示 hiproxy 服务器的配置，routes 表示我们的代理规则，这里我们只定义了一个路由规则：将 / 的请求全部转发到 http://localhost:3000/ 上。此外，hiproxy 配置文件还支持其他的配置项，比如 plugins、middlewares 等等，我们会在后面的例子中进一步介绍。
示例代码
假设我们要将以下的代理规则添加到 hiproxy.config.js 中：
-- -------------------- ---- -------
-------------- - -
-------- -
-------------------------
--
------------ -
-----------------------------
--
------- -
----- -----
--
------- --
----- ----
------ -
---- -------------------------
--
-- -
----- -------
------ -
---- -------------------------
--
---
--通过 hiproxy-conf-parser，我们可以将上面的 hiproxy 配置文件转化为以下的格式：
-- -------------------- ---- -------
-------------- - -
-------- --
----- -------------------------
---
------------ --
----- -----------------------------
---
------- -
----- -----
--
------- --
----- ----
------- ---
----------- ---
------ -
---- -------------------------
--
-- -
----- -------
------- ---
----------- ---
------ -
---- -------------------------
--
---
--其中，plugins、middlewares、server 这三个配置项都是 hiproxy.config.js 中的顶层配置项，对应的 hiproxy 配置文件也不需要做任何调整。而 routes 配置项表示我们的代理规则，hiproxy-config-parser 对其进行了一定的改造，使其更加轻松、直观地使用 hiproxy 插件和中间件。
举个例子，我们要在 /api 的请求上添加一个中间件，可以这样修改配置：
-- -------------------- ---- -------
-------------- - -
-------- -
-------------------------
--
------------ -
-----------------------------
--
------- -
----- -----
--
------- --
----- ----
------ -
---- -------------------------
--
-- -
----- -------
----------- -
-----------------------------
--
------ -
---- -------------------------
--
---
--这样，hiproxy-conf-parser 就能自动识别出我们要使用的中间件并加入到 /api 的代理规则中。
安装和使用 hiproxy-conf-parser
安装 hiproxy-conf-parser 的方式非常简单，只需要在项目根目录下执行：
npm install hiproxy-conf-parser --save-dev
安装完毕之后，我们就可以在项目中使用 hiproxy-conf-parser 这个包了。下面是 hiproxy-conf-parser 的使用步骤：
在 hiproxy.config.js 中引入 hiproxy-conf-parser
首先，在 hiproxy.config.js 文件中引入 hiproxy-conf-parser 并将其执行，如下所示：
-- -------------------- ---- -------
----- - ----------- - - -------------------------------
-------------- - -------------
-------- -
-------------------------
--
------------ -
-----------------------------
--
------- -
----- -----
--
------- --
----- ----
------ -
---- -------------------------
--
-- -
----- -------
----------- -
-----------------------------
--
------ -
---- -------------------------
--
---
---运行 hiproxy
接下来，我们在项目根目录下执行以下命令来运行 hiproxy：
npx hiproxy start
这时候，hiproxy 就会自动读取我们修改后的 hiproxy.config.js 文件了。
配置 hiproxy 插件和中间件
我们可以在 plugins 和 middlewares 配置项中分别添加 hiproxy 插件和中间件。假设我们要添加另外一个插件 hiproxy-plugin-example-2，只需要修改配置文件：
-- -------------------- ---- -------
-------------- - -------------
-------- -
-------------------------
---------------------------
--
------------ -
-----------------------------
--
------- -
----- -----
--
------- --
----- ----
------ -
---- -------------------------
--
-- -
----- -------
----------- -
-----------------------------
--
------ -
---- -------------------------
--
---
---此外，我们还可以在路由规则中设置单独的插件和中间件。举个例子，我们要在 /api 的请求上添加 hiproxy-plugin-example-3 插件和 hiproxy-middleware-example-2 中间件，可以这样修改配置：
-- -------------------- ---- -------
-------------- - -------------
-------- -
-------------------------
---------------------------
---------------------------
--
------------ -
-----------------------------
-------------------------------
--
------- -
----- -----
--
------- --
----- ----
------ -
---- -------------------------
--
-- -
----- -------
------- -
---------------------------
--
----------- -
-----------------------------
-------------------------------
--
------ -
---- -------------------------
--
---
---通过 hiproxy-conf-parser，我们可以很方便地管理 hiproxy 的配置项。如果你还没有使用 hiproxy 或者还不是很熟悉的话，建议先去了解一下 hiproxy 的基本使用方法。相信通过 hiproxy 和 hiproxy-conf-parser 的配合，你的前端调试体验一定会更加愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057d2781e8991b448ec146