完善koa2开发环境
- 配置eslint以及pre-commit
- inspect调试
- 404页和错误页
配置eslint
配置eslint主要为了统一代码风格，只要遇到和我们自己在.eslintrc.json里的配置不同的情况就会报错。
- 根目录下新建
.eslintignore，存放跳过的文件:
- 根目录下新建
.eslintrc.json，根据个人习惯 规定代码风格:
- 项目文件下安装eslint和babel-eslint：
npm i eslint babel-eslint --save-dev - 在package.json中新建lint命令：
- 运行lint命令，使用vscode直接到相关文件中重新保存即可解决问题：
- 再次运行lint命令：
配置pre-commit
- 配置eslint只是统一代码风格，就算输入有误也可正确提交。
- 但pre-commit不同，他是“在提交（commit）之前”硬性做。
- 代码提交到coding是需要commit到本地仓库后再push到coding服务器的
- 项目文件下安装pre-commit：
npm i pre-commit --save-dev - 在package.json中配置pre-commit：
规定在commit之前需要运行lint命令来检查代码 - 测试，提交代码到coding：
- 添加文件到本地仓库：
git add . - 提交文件到本地仓库：
git commit -m "feat:增加eslint"执行这一步时pre-commit就会强制执行lint命令，如果报错就无法提交 - 没报错就可以继续将本地文件推送到coding服务器:
git push origin master
- 添加文件到本地仓库：
inspect调试
- 8.0以上的node就支持inspect调试，无需另外安装包。
- inspect是借助node和chrome浏览器进行调试的。
- 访问chrome://inspect/#devices后点击Open dedicated DevTools for Node=》点击inspect进入调试页面
- 重点：打断点，在inspect调试页面中将自动运行到断点处停止运行，接下来可通过按钮手动运行下一部分的代码
- 在package.json中，dev命令中（调试都是在线下）添加inspect调试的端口号：
默认的调试端口就是9229，如果两个node程序同时运行，并且都需要使用inspect调试，那么其中一个inspect就需要更改端口。 - 运行
npm run dev:
- chrome浏览器中访问chrome://inspect/#devices：
点击得到调试页面 - 测试：访问项目首页，调试工具中可看到：
这个和程序控制台是一样的，光这样不够 - 停止运行，在路由中给项目加断点：
- 重新运行程序，重新点击inspect进入调试页面，访问项目首页：
- 此时可看到调试页面卡在debugger的断点位置：
控制台目前只输出before debugger - 点击按钮继续往下运行下一部分：
点击2次后打印after debugger
- 此时可看到调试页面卡在debugger的断点位置：
404页和错误页
- 回顾：public文件夹下存放的都是静态文件，在app.js中我们注册了public作为静态资源的目录：
- css存放在public/css下，js存放在public/javascripts下，头部和底部组件存放在views/layout下，404和错误页存放在views/widgets下。
开发路由
- routes文件夹下新建api文件夹：存放用于输出接口的路由；新建view文件夹 存放用于输出页面的路由
404路由
- view下新建error.js：
- app.js中，引入并注册路由：
404路由必须在所有路由的最下面注册，否则匹配路由时*就把所有路由都匹配了 - 测试：访问其他页面可正常访问，但访问不存在的路由：
错误页路由
- app.js中本身就自带了错误页路由，修改错误页路由配置：
- 测试：在json路由中抛出一个错：
再访问json路由：
- 但在开发环境下我们希望不要跳转错误路由，直接暴露错误信息，所以需要一个全局环境参数来判断：
- 此时在开发环境下访问错误的json路由：
此时直接在控制台看错误并进行修改即可