引言
随着前端开发的不断发展,前端工程师们在日常工作当中经常需要处理一些复杂的 API,这些 API 往往需要在文档销毁和实操操作之间不断地切换,给前端开发带来了不少的麻烦。针对这一痛点,npm 包 api-notebook-loader
应运而生,帮助前端开发工程师们更为便捷地处理 API 相关问题。
api-notebook-loader
简介
api-notebook-loader
是一个 webpack loader,它可以将 markdown 文件转化为 JSON 格式,这样前端工程师们就可以将 API 的文档信息以 JSON 格式传递给代码,将文档集成到代码当中。这种方式既方便工程师们查看文档,又可以省去不少不必要的操作。
安装
使用 api-notebook-loader
需要先安装它。运行一下命令即可安装:
--- ------- ------------------- ----------
安装完成后,我们就可以在项目中使用 api-notebook-loader
了。
使用
配置 webpack
在使用 api-notebook-loader
前,需要我们先对 webpack 进行配置:
-------------- - - ------ -- ----- -- - ----- -------- ---- - - ------- ---------------------- -------- ----- - - - - - -
api-notebook-loader
loader 需要传入一些参数,我们将在使用时进行解释。
标识 API 请求
我们会在 markdown 文件当中标识我们将要请求的 API,这时候我们可以在文本中添加 $ 符号,同时指定变量名。例如:
- ------ -- ---- - ----- ----------- -- ---- -------------------- ------ - ------ ----- - ----- - ----- - - -- - -- -- - ------ - - - - -
我们需要对这里的 $符号进行处理,这里我们可以使用如下配置:
-------- - ------- ---- -------- ------------------------------- -
这里的 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