Koa+Webpack基础结构搭建

项目Github地址：https://github.com/chenhui-syz/koa-webpack-exercise

www.koajs.com
中文网 koa.bootcss.com
利用async函数丢弃回调函数，并增强错误处理。Koa没有任何预置的中间件，可快速而愉快地编写服务端应用程序。
demo的github地址：https://github.com/chenhui-syz/koa-webpack-exercise

koa核心概念.png

koa核心流程：
客户端发起请求，服务端接收到请求后，经过koa-router,koa-cors,koa-body,koa-jwt,koa-json等一系列中间件处理之后，返回处理结果给客户端。所以，学习koa，就要从认识中间件开始

koa初体验

安装：
npm install -S koa-router
引用：
const Router = require('koa-router')
const router = new Router()

自定义一个中间件

const Koa = require('koa')
const app = new Koa()
const middleware = function async(ctx,next) {
    console.log('this is a middleware!')
    console,log(ctx.request.path)
    next()
}
app.use(middleware)
app.listen(3000)

koa执行中间件的时候遇到next，就会把请求上下文继续丢给下一个中间件去处理。没有next，koa默认本次请求中止。

next下面的console语句

const middleware = function async(ctx,next) {
    console.log('this is a middleware!')
    console,log(ctx.request.path)
    next()
    console.log('hahahahaha')
}
const middleware1 = function async(ctx,next) {
    console.log('this is a middleware111111!')
    console,log(ctx.request.path)
    next()
    console.log('this is a middleware111111 ending! ')
}
const middleware2 = function async(ctx,next) {
    console.log('this is a middleware222222!')
    console,log(ctx.request.path)
    next()
    console.log('this is a middleware222222 ending! ')
}
app.use(middleware)
app.use(middleware1)
app.use(middleware2)

打印结果是

this is a middleware!
this is a middleware111111!
this is a middleware222222!
middleware222222 ending
middleware111111 ending
hahahahaha

需要注意的是，先打印的middleware222222 ending，后打印的middleware111111 ending，最后打印hahahahaha，请求结束之后，进行response的时候，先进后出。（洋葱模型）

获取get请求中的params

router.get('/api',ctx => {
    //get params
    const params = ctx.request.query
    console.log(params)
    //name:'imoc',age:'28'
    console.log(params.name, params.age)
})

安装了koa-json之后

const json = require('koa-json')
app.use(json({pretty:false,param:'pretty'}))

这样设置的话 在请求的最后加上 &pretty 才会去拿到json格式化后的数据

所有的路由都写在index.js中，当路由功能变多的时候肯定是不合理的
需要把路由按照功能模块进行区分
使用一个路由中间件，就要引入和use使用一次，当中间件变多的时候，indexjs依旧会变得很冗长

配置一个可满足基本生产需求的Koa项目

初始化一个新项目：npm -init- y
安装中间件：npm install koa-json koa-router koa-body @koa/cors koa-static koa-combine-routers koa-helmet -S

• 路由：koa-router
• 协议解析：koa-body
• 跨域处理：@koa/cors
• 静态资源统一处理：koa-static
• 将返回的数据自动转换为json格式：koa-json
• 路由压缩中间件 ：koa-combine-routers
• header安全处理：koa-helmet

nodemon配置koa热加载
npm i -D nodemon

项目目录分析：

• api文件夹：放路由的一些具体业务以及实现
• common文件夹：放封装好的工具类函数
• model文件夹：封装好的数据模型
• • routes文件夹：放路由的请求路径，routes.js=>在这个文件里做combine router（合并路由的操作）的操作

配置webpack支持ES6语法

npm i -D webpack webpack-cli clean-webpack-plugin webpack-node-externals @babel/core @babel/node @babel/preset-env babel-loader cross-env
clean-webpack-plugin：清理dist文件夹
webpack-node-externals：快速处理node_modules文件夹下的用不到的模块
@babel/core @babel/node @babel/preset-env babel-loader：解析ES6语法
cross-env：设置环境变量

上面的插件都安装完成了之后，接下来书写webpack.config.js（后面可以把开发/生产的webpack配置分文件写在项目下的config文件夹中）

当indexjs使用es6语法之后，这时候启动项目就不能使用 npx src/index.js 这个指令了，而应该用 npx babel-node src/index.js ，如果想要热更新 ，则要用 npx nodemon --exec babel-node src/index.js，在package.json的scripts添加属性

"start:es6": "nodemon --exec babel-node src/index.js"

项目打包优化

npm-check-updates
作用：检查npm的依赖包
全局安装
npm install -g npm-check-updates
安装了之后就可以使用ncu指令
输入ncu 自动检查有没有包有更新 ncu -u 去更新监测出来可以进行更新的版本
rm -rf node_modules
npm i
删除依赖包并重新安装

每一个中间件都需要import和use非常的麻烦，推荐一个依赖包可以帮助我们整合依赖包
koa-compose
npm i koa-compose

接下来优化webpack
通常来说 webpack的配置会分开发模式和生产模式
新建一个config文件夹，文件夹下新建一个webpack.config.base.js ,这个文件夹下放置的代码，是通用的。另外还有prod和dev文件
在base文件中，通过DefinePlugin去动态的设置NODE_ENV

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'prod') ? "'production" : "'development"
    }
})

在正式打包的时候，需要把多个配置文件进行合并，这里再推荐一个npm包
npm i webpack-merge -D

dev生产模式的配置中需要对代码进行压缩，这里推荐一个插件
（曾经是uglify）
npm install terser-webpack-plugin --save-dev

接下来对chunk进行优化（通用代码，避免重复的引用依赖）
splitChunksPlugin

接下来增加package.json里的scripts

在index.js定义isDevMode，如果是false，则压缩中间件
npm i koa-compress -S