引言
随着前端开发的不断发展，前端工程师们在日常工作当中经常需要处理一些复杂的 API，这些 API 往往需要在文档销毁和实操操作之间不断地切换，给前端开发带来了不少的麻烦。针对这一痛点，npm 包 api-notebook-loader 应运而生，帮助前端开发工程师们更为便捷地处理 API 相关问题。
api-notebook-loader 简介
api-notebook-loader 是一个 webpack loader，它可以将 markdown 文件转化为 JSON 格式，这样前端工程师们就可以将 API 的文档信息以 JSON 格式传递给代码，将文档集成到代码当中。这种方式既方便工程师们查看文档，又可以省去不少不必要的操作。
安装
使用 api-notebook-loader 需要先安装它。运行一下命令即可安装：
npm install api-notebook-loader --save-dev
安装完成后，我们就可以在项目中使用 api-notebook-loader 了。
使用
配置 webpack
在使用 api-notebook-loader 前，需要我们先对 webpack 进行配置：
-- -------------------- ---- -------
-------------- - -
------ --
----- --
-
----- --------
---- -
-
------- ----------------------
-------- -----
-
-
-
-
-
-api-notebook-loader loader 需要传入一些参数，我们将在使用时进行解释。
标识 API 请求
我们会在 markdown 文件当中标识我们将要请求的 API，这时候我们可以在文本中添加 $ 符号，同时指定变量名。例如：
-- -------------------- ---- ------- - ------ -- ---- - ----- ----------- -- ---- -------------------- ------ - ------ ----- - ----- - ----- - - -- - -- -- - ------ - - - - -
我们需要对这里的 $符号进行处理，这里我们可以使用如下配置：
options: {
marker: '$',
apiRoot: 'https://yourdomain.com/api/v1'
}这里的 marker 指定了我们在 markdown 文件当中使用的符号，apiRoot 指定了我们在前端代码当中使用 API 的根路径。
转化为 JSON
处理完 markdown 文件之后，我们需要将其转化为 JSON 格式，这时候就需要使用到 api-notebook-loader 提供的 API 方法 parseApi。例子代码如下：
-- -------------------- ---- ------- ------ ----------- ---- ----------- ----- ------- - -------------------------------- ----- --------- - ---------- ----- ---- - ------------------------ ---------------- -- - ----- --- - ------------------------- ----------- ----------------- ---
这里我们使用 JSON.parse 将 markdown 文件解析成 jsonArray，遍历这个数组，然后将每个 API 请求转化为 URL 路径。
总结
通过本文，我们学会了使用 api-notebook-loader 提高前端开发工程师们处理 API 的效率。希望大家可以使用这个 npm 包，使 API 的处理更为方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562eb81e8991b448e09da