Koa 项目脚手架改造

项目开发环境搭建

基于 gulp 搭建开发编译环境，使用 gulp-typescript 编译 TypeScript 文件，gulp-nodemon 监控文件变更，自动编译并重启 Node 服务，提升开发效率。

gulp 配置

const { src, dest, watch, series, task } = require('gulp');
const del = require('del');
const ts = require('gulp-typescript');
const nodemon = require('gulp-nodemon');
const tsProject = ts.createProject('tsconfig.json');
function clean(cb) {
  return del(['dist'], cb);
}
function toJs() {
  return src('src/**/*.ts')
    .pipe(tsProject())
    .pipe(dest('dist'));
}
function runNodemon() {
  nodemon({
    inspect: true,
    script: 'src/app.ts',
    watch: ['src'],
    ext: 'ts',
    env: { NODE_ENV: 'development' },
  }).on('crash', () => {
    console.error('Application has crashed!');
  });
}
const build = series(clean, toJs);
task('build', build);
exports.build = build;
exports.default = runNodemon;

TypeScript 配置

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist",
    "module": "commonjs",
    "target": "esnext",
    "allowSyntheticDefaultImports": true,
    "importHelpers": true,
    "strict": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "noImplicitReturns": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowJs": true,
    "sourceMap": true,
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

ESLint 配置

{
  "env": {
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/eslint-recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "indent": ["warn", 2],
    "no-unused-vars": 0
  }
}

package.json 运行配置

{
  "scripts": {
    "start": "gulp", // 开发模式
    "build": "gulp build", // 生产模式
    "eslint": "eslint --fix --ext .js,.ts src/", // 格式化代码
    "server": "NODE_ENV=production && node dist/app" // 生成生产服务器
  }
}

添加类型化支持

项目主要使用以下组件：

jsonwebtoken

koa-body

koa-compress

koa-favicon

koa-logger

koa-router

koa-static

koa2-cors

log4js

Node

安装对应的类型定义文件：

npm install -D @types/jsonwebtoken @types/koa @types/koa-compress @types/koa-favicon @types/koa-logger @types/koa-router @types/koa-static @types/koa2-cors @types/log4js @types/node

使用 TypeScript 装饰器改造项目

定义 HTTP 请求的装饰器

import 'reflect-metadata';
import { ROUTER_MAP } from '../constant';
function createMethodDecorator(method: string) {
  return function httpMethodDecorator(path: string) {
    return function (proto: any, name: string) {
      const target = proto.constructor;
      const routeMap = Reflect.getMetadata(ROUTER_MAP, target, 'method') || [];
      routeMap.push({ name, method, path });
      Reflect.defineMetadata(ROUTER_MAP, routeMap, target, 'method');
    };
  };
}
export const post = createMethodDecorator('post');
export const get = createMethodDecorator('get');
export const del = createMethodDecorator('del');
export const put = createMethodDecorator('put');
export const patch = createMethodDecorator('patch');
export const options = createMethodDecorator('options');
export const head = createMethodDecorator('head');
export const all = createMethodDecorator('all');

装饰控制器的方法

export default class Sign {
  @post('/login')
  async login(ctx: Context) {
    const { email, password } = ctx.request.body;
    const users = await userDao.getUser({ email });
    // ...
    return ctx.body = { code: 0, message: '登录成功', data };
  }
  @post('/register')
  async register(ctx: Context) {
    const { email, password } = ctx.request.body;
    const salt = makeSalt();
    // ...
    return ctx.body = { code: 0, message: '注册成功！', data };
  }
}

收集元数据和添加路由

import 'reflect-metadata';
import fs from 'fs';
import path from 'path';
import { ROUTER_MAP } from './constant';
import { RouteMeta } from './type';
import Router from 'koa-router';
const addRouter = (router: Router) => {
  const ctrPath = path.join(__dirname, 'controller');
  const modules: ObjectConstructor[] = [];
  fs.readdirSync(ctrPath).forEach(name => {
    if (/^[^.]+?\.(t|j)s$/.test(name)) {
      modules.push(require(path.join(ctrPath, name)).default);
    }
  });
  modules.forEach(m => {
    const routerMap: RouteMeta[] = Reflect.getMetadata(ROUTER_MAP, m, 'method') || [];
    if (routerMap.length) {
      const ctr = new m();
      routerMap.forEach(route => {
        const { name, method, path } = route;
        router[method](path, ctr[name]);
      });
    }
  });
};
export default addRouter;