领导要找一款开源的接口管理工具，最后看上了yapi，让咱一个人进行一下二开，本来以为有官方文档，做些简单的修改，应该不难，没想到弯弯绕绕踩了好多坑，才把项目给打包成功，汗颜~~
系统试用
先是跟着官网的使用教程，简单试用熟悉了YApi这个系统怎么使用，如何注册账号、创建分组、项目、添加分类和接口、mock数据，是一个在接口管理上用着还不错的系统。
技术栈说明
官网教程中，介绍使用技术栈是：
后端： koa mongoose
前端： react redux
唉，我们公司使用的是VUE技术栈，本人也一直用Vue开发，React简单了解过，知道Redux是一个和Vuex功能差不多的状态管理器，但是还没有真正使用React开发过。至于后端这个Koa，因为此前刚刚学习过Node.js,有过一面之缘，在这个项目再次遇到，已经忘得一干二净，完全忘了是Node.js的web框架。MongoDB数据库之前倒是了解过，但实际开发中，也是没有用到过。真是一个崭新的开始~
之前自学技术时，已经按照网上的教程安装了MongoDB，Node环境也有，github上下载下来源码，按照儿次开发的手册，成功运行了起来。但是看源码，还是不知道从哪里入手。
急速补习
就在这个崭新的开始中，急需一个使用相似技术开发的教程来拯救一下，翻看了各个前端学习平台，终于在B站找到了一个比较喜欢的，也是使用Koa+MongoDB开发系统的教程。 【千锋教育】前端实战项目_Koa+MongoDB打造简书后台管理系统
这个教程中的技术栈和YApi的技术栈的区别就是这个教程中的前端用的是Vue+elementUI,不过前端问题不大，主要是先熟悉一下Koa+MongoDB是如何开发的。
随后又通过各方面的学习，对YApi使用的技术有了更多的认识，我个人补充了一下YApi的技术栈：
后端： Node + Koa2(web框架，koa-static(静态资源)、koa-websocket) + nodemon(热部署) + MongoDB + mongoose(数据库连接)
前端： react + redux(状态管理) + react-router-dom + axios(网络请求库) + AntDesign(UI组件) 构建：yKit(对 Webapck 的一层封装)
踩坑点
1、node.js的版本和node-sass版本不搭
npm install，安装依赖包时报 node-sass: Command failed. 错误
解决参考：node-sass: Command failed.
因为我的本地node版本为16.17.0，
所以将package.json中"node-sass": ^4.9.0",改为了node-sass": "^6.0.0"后，重新 npm install 安装。
//"node-sass": ^4.9.0"
//改为了
"node-sass": "^6.0.0"
2、windows命令行工具
解决参考：解决：NODE_ENV 不是内部或外部命令，也不是可运行的程序，或者批处理文件
package.json中的"scripts":
//这种操作在powershell中不被支持，在cmd中也不被支持，这是Mac中bash或Linux的shell中的独特操作，
"build-client": "NODE_ENV=production ykit pack -m",
//在我的windows机器上，拆分为两条脚本,改为：
"build-client": "set NODE_ENV=production && ykit pack -m",
3-1、缺少模块
Error: Cannot find module 'uglifyjs-webpack-plugin'
解决：
npm i uglifyjs-webpack-plugin@1 -D
3-2、NPM版本冲突
解决参考： 解决：ERESOLVE unable to resolve dependency tree
解决，添加 --legacy-peer-deps ：
npm i uglifyjs-webpack-plugin@1 -D --legacy-peer-deps
4、配置 "babel"
Decorators are not officially supported yet in 6.x pending a proposal update. However, if you need to use them you can install the legacy decorators transform with:
npm install babel-plugin-transform-decorators-legacy
解决：
npm install babel-plugin-transform-decorators-legacy --save-dev --legacy-peer-deps
and add the following line to your .babelrc file:
{ "plugins": ["transform-decorators-legacy"] }
解决：
YApi没有.babelrc文件，不过在package.json文件中有配置 "babel"，所以可以将package.json的"babel"中添加 transform-decorators-legacy 配置：
"babel": {
"presets": [
[
"es2015",
{
"loose": true,
"modules": "commonjs"
}
],
"es2017",
"stage-0",
"react"
],
"plugins": [
"transform-runtime",
"transform-decorators-legacy",//添加配置
[
"webpack-alias",
{
"config": "webpack.alias.js"
}
]
]
},
5、使用webpack的externals配置，不处理应用的某些依赖库
ykit.config.js
打包时,编译一些包报错：
Module not found: Error: Can‘t resolve ‘fs‘ in ‘.../fs/'
Module not found: Error: Can‘t resolve ‘fs‘ in ‘.../net/'
Module not found: Error: Can‘t resolve ‘fs‘ in ‘.../dns/'
Module not found: Error: Can‘t resolve ‘fs‘ in ‘.../tls/'
解决：
webpack可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。
//如果不想把第三方库打包到bundle中，就用externals解决
baseConfig.externals= {
fs: require('fs'),
net: require('net'),
dns: require('dns'),
tls: require('tls'),
child_process: require('child_process'),
} ;
6、使用webpack的externals配置，去除对config.json的重复编译
报错：Module build failed: SyntaxError: Unexpected token m in JSON at position 0
尝试一些网上的方法，使用 row-loader，嗯---，并不解决问题~
受到github的启发: Do not try to parse again the string if it's already parsed
使用webpack的externals配置，去除对config.json的重复编译
ykit.config.js
baseConfig.module.preLoaders.push({
test: /\.json$/,
loader: 'json-loader',
});
修改为：
baseConfig.module.preLoaders.push({
test: /\.json$/,
loader: 'json-loader',
exclude: /config.json/, //去除对config.json的重复编译
});
7、
报错： [error] index@1fd57c36be1beb1f505b.js from UglifyJs SyntaxError: Unexpected token: operator (>) [../~/fs-extra/lib/util/assign.js:5,0]
参考：
blog.csdn.net/lazy_ting/a… blog.csdn.net/ccxh5053986…
解决：
UglifyJs无法解析ES6的语法，而引入的组件里包含了ES6
babel的解析把node_modules文件下的依赖包都排除了,为了使某些模块能被正常使用,要取消“exclude”对node_modules的完全排除，把相应模块的文件通过“include”加进去解析，修改如下：
baseConfig.module.loaders.push({
test: /\.(js|jsx)$/,
loader:'babel-loader',
//以下，babel的解析把node_modules文件下的依赖包都排除了
// exclude: path.resolve(__dirname, 'node_modules'),
// exclude: /node_modules/,
//为了使某些模块能被正常使用,要把相应模块的文件的解析加进去，所以补充如下：
include: [
path.resolve(__dirname, 'node_modules/fs-extra'),
path.resolve(__dirname, 'node_modules/universalify'),
path.resolve(__dirname, 'node_modules/nodemailer'),
],
8、经过前面的坎坷填坑，终于：
npm run build-client
打包成功啦！！！
npm start
网页打开成功啦！！！
撒花 撒花~~~ ~~~
9、结语
在windows上解决问题后，发现在github关于二次开发YApi遇到问题的解答中，提到二次开发不支持 window,请使用 linux或 mac，不知道那些使用 linux或 mac进行二次的同行有没有这么多问题，总之，解决问题的过程中，也学习补充了很多，发现自己诸多前端的知识缺口和薄弱点，要好好去补一补了~
二次开发遇到问题请看这里 #208
请确保 node 版本是 7.6.0，如果是最新的 node 版本，很容易导致 sass 安装需要编译
请确保 npm 版本大于 5.0，并且使用了淘宝源，确保 ykit 是旧版 0.x 版本
第一次执行 npm install 请删除原有的 node_modules 目录，如果 npm install 失败，请查找原因，再次删除后重新安装
npm 安装完成后，请执行 npm run dev 启动开发服务器，默认命令行提示访问两个 url，一个是前端服务器，两位一个是后端服务器，请访问 config.json 指定端口的服务器
npm run dev 是开发服务器，改过代码后就会自动编译和刷新浏览器
如果确认源码修改没有问题，执行 Ykit pack -m 打包和 执行 Npm run start 运行 prd 服务器
注：二次开发不支持 window,请使用 linux或 mac
以下是过程中其他绕弯试错时的报错，仅供参考，可以不用看：
或是刚要试着解决、或是解决途中觉得解决方向不对、或者最终试了还是走不通最后放弃的、或是解决最后重新回到开始的报错的... ...
1、
报错：
Module build failed: SyntaxError: xxxx.js: Unexpected token
npm install --save-dev babel-preset-stage-3 --legacy-peer-deps
baseConfig.module.loaders.push({
test: /\.(js)$/,
loader:'babel-loader',
修改为：
baseConfig.module.loaders.push({
test: /\.(js|jsx)$/,
loader:'babel-loader',
.babelrc文件：
"presets": ["es2015", "react"],
改为：
"presets": ["es2015", "react","react-app"],
2、
报错：
[error] ./client/Application.js Module build failed: SyntaxError: D:\yapi\yapi-master\client\Application.js: Unexpected token (69:0)
67 | plugin.emitHook('app_route', AppRoute);
68 | @connect(
.babelrc文件：
{
"presets": ["es2015", "react","react-app"],
"plugins": [
"babel-plugin-transform-class-properties",
]
}
改为：
{
"presets": ["es2015", "react","react-app"],
"plugins": [
"babel-plugin-transform-class-properties",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
3
报错：
Module build failed: Error: Cannot find module '@babel/core'
babel-loader和babel-core版本不对应所产生的，
babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x
本地 "babel-loader": "^6.4.1",
npm uninstall babel-core --dev --legacy-peer-deps
npm install babel/core@5 --dev --legacy-peer-deps
4
报错：
Module build failed: ReferenceError: [BABEL] direct.presets
upgraded to Babel 6 and it works 下载好对应的依赖 blog.csdn.net/weixin_4470…
5
报错：
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
