Webpack4 plus koa

基于webpack4、koa2构建的 Node项目，集成react, vue和node服务，多页面入口，支持开发、生产多种场景。

• Node版本需要8+

目前最新版webpack4.16.5可运行

• https://webpack.js.org

打包构建

• 配置项 实际运行的配置为config.default.js + config.${process.env.APP_ENV}.js

• 多页面入口 页面入口为src/page/**/index.js

html入口为src/page/**/index.html 或者 src/entry/layout.html

• 自动刷新 客户端代码修改自动编译刷新，服务端代码修改nodemon自动重启(需手动刷新，考虑到这属于低频场景)

• 编译优化 happypack多进程编译，webpack-parallel-uglify-plugin多进程js压缩，使用webpack4的optimization模块拆分优化

• 支持服务端渲染 关键配置大概有几个：

  • target: 'node' 由于输出代码的运行环境是node，源码中依赖的node原生模块没必要打包进去；
  • externals: [nodeExternals()] webpack-node-externals的目的是为了防止node_modules目录下的第三方模块被打包进去，因为nodejs默认会去node_modules目录下去寻找和使用第三方模块。
  • 忽略掉不需要被打包进用于服务端的代码中去的文件，例如css之类(或者提取css以行内样式的形式插入html)
  • libraryTarget： 'commonjs2'以commonjs2规范导出渲染函数，以供给采用nodejs编写的http服务器代码调用。

Node服务模块

借鉴egg的 约定优于配置 设计思想，app/core为框架核心，定制了一整套微服务框架规范。 主要目的是实现egg的规范，简化实现过程，详见app源码

Config

• preMiddleware 前置中间件
• postMiddleware 后置中间件
• static 静态资源配置
• views 模板配置
• bodyparser body解析配置，FormData使用formidable解析
• cors 跨域资源配置
• formidable 上传配置
• onerror 500处理
• notfound 404处理

约定所有中间件配置参数为config的同名key值，例如：

// middleware/logger.js

module.exports = (app) => {
  const { config } = app;
  const option = config.logger

  return async function(ctx, next){
    // handle with logger option
  }
};

Extend

app/extend目录下的模块用于扩展ctx对象 调用方式示例：ctx.validate.isMobile.call(ctx)

Middleware

中间件和 Koa 的中间件写法是一模一样的 core里内置了一些常用中间件，并且可以通过配置开启中间件(包括内置中间件)

由于中间件的加载顺序会影响到应用的运行，所以配置增加了config.preMiddleware和config.postMiddleware, 实际中间件加载顺序为:

config.middleware = config.preMiddleware.concat(config.coreMiddleware).concat(config.postMiddleware)

Controller

控制层，路由逻辑封装

Service

服务层，服务逻辑封装

Start

# install with taobao registry
npm run ii
# 本地开发
npm run dev
# 打包构建
npm run build
# 生产运行
npm run start