在年前员工访谈时发现，前后端协作开发会出现一定的内耗现象，在当前前后端分离的情况下前端往往会因为后端接口存在问题影响对接速度，在接口设计不明确的情况下还需要反复确认和沟通。公司过往使用ApiManager做接口信息归档，然而ApiManager无法做到在线调试和验证。在经过一段时间调研后最终选择了Yapi作为ApiManager的后继者（说白了又不想花钱，又要功能齐全的话开源的Yapi不失为一个比较理想的解决方案）。
那为什么不直接在项目中使用SwaggerUI呢？随项目启动且不用额外编写接口信息，通过注解就直接解决大部分文字注释的问题，并且可以直接对项目进行调试非常方便。
首先并不是SwaggerUI不好用，这边主要考虑的点有几个：
…除了这些还有很多很多，就不一一举证了。
但是在搭建Yapi的过程中也不是一帆风顺的（按照网上提供的搭建文章来一步一步做还是没有办法完整整合插件，最后只能靠猜给搞定了），下面就讲讲这个Yapi是如何搭建的。
首先为了方便我这边下载MongoDB的Docker镜像并部署：
docker pull mongo:latest
创建挂载目录并启动mongodb
mkdir -p /data/docker/mongodb
docker run -p 27017:27017 -name mongodb -v /data/docker/mongodb:/data/db -d mongo:latest
这样就可以了，先不用初始化mongodb因为后面cli安装时会初始化的。接着就安装nodejs和npm，这个比较简单就不详说了。在安装好nodejs之后就可以通过命令安装yapi
npm install -g yapi-cli --registry https://registry.npm.taobao.org
到此之外的安装都比较顺利，但是要注意安装后的yapi-cli执行文件是否有创建软连接到/usr/bin目录下，如果没有的话自己通过ln -s创建两个软连接到/usr/bin目录底下，一个命名为yapi，另一个命名为yapi-cli。接下来就可以通过yapi server启动初始化界面。接着就可以通过访问http://xxx.xxx.xxx.xxx:9090就能够访问到部署页面，如下图：
到了这个环节就可以按照界面提示进行配置。在完成平台部署后先找到安装目录，并通过以下命令启动Yapi：
nohup node vendors/server/app.js &
之后就能够通过http://xxx.xxx.xxx.xxx:3000访问到Yapi页面了。如下图：
登录账号是“管理员邮箱”，密码初始化为ymfe.org.自此Yapi算是搭建ok了，但是真正困难的来了。
由于管理系统一般都需要登录后访问，为的是拿到一个token信息。而接口调试时为了尽可能贴近真实场景也需要先获取token后再触发接口请求，因此每一次都需要重复“先登录，拷贝token，粘贴到接口header，再触发接口”是非常麻烦。因此需要在Yapi中安装一个插件使其在每一次请求前都先自动获取token，那就不用人手去“复制、粘贴”了。
还好为了解决这个问题yapi提供了一个yapi-plugin-interface-oauth2-token的插件，如下图：
本想按照npm官网提示去做，结果还出现的各种报错。根据上图中版本描述所说，最新的插件版本在2020年10月，也就是说近1年多2年没有更新了。在使用
yapi plugin --name yapi-plugin-interface-oauth2-token
命令安装时先是报node-sass组件“访问权限不足”的问题，接着在命令前面加上sudo后又引发了新的问题…
通过npm rebuild node-sass后还是出现错误。在经过sudo npm audit fix修复后接着就尝试修改yapi-plugin-interface-oauth2-token的版本为1.2.3（因为npm官网说如果用yapi plugin升级不行就将yapi-plugin-interface-oauth2-token降级为1.2.3之后删除node_modules文件夹重新npm install）结果还是不行。
多次尝试无果后我就想会不会是我yapi的版本太高而插件的版本太低导致的，结果将yapi版本换为1.9.2（2022年5月版本），在安装完yapi之后再尝试进行插件的整合，结果还是报各种异常。
最终还是用回yapi和插件的最新版本，虽然结果跟第一次一样，如下图：
但是根据这个编译结果还是看出了点端倪，于是我对源码进行了修改，先是componentWillMount替换成UNSAFE_componentWillMount，再将componentWillReceiveProps替换成UNSAFE_componentWillReceiveProps，全部替换后重新进行插件安装基本上所有的编译问题都已经解决了，就还剩下
Module parse failed: /data/yapi/vendors/node_modules/swagger-client/lib/resolver.js Unexpected token (119:38)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (119:38)
这个问题。经过排查发现这个是因为swagger-client未能固定好版本引起的，于是修改了package.json中有关swagger-client的版本信息固定其为3.5.1版本后再尝试安装插件，结果就编译成功了。如下图：
编译成功后进入到yapi目录重新通过node vendors/server/app.js启动程序后就会发现在设置中多了个tab，如下图：
至此插件安装和yapi安装都完成了。