Koa + ts 模板搭建

1. 写在前面

​ 最近在学Typescript 不论是前端·Vue还是后端的Node都在向Typescript的写法过渡,一方面是因为Typescript·的一些特性,能让我们在开发中减少Bug出现的概率,最重要的一方面是因为:Ts写起来简直不要太爽。这篇文章主要是记录我在搭建Koa(Ts版)模板的过程,这个模板是装饰器风格的模板,希望能帮助到阅读到这篇文章的你。

​ 模板地址: https://github.com/q389491729/koa-ts

2. 为什么要搭建模板

​ 搭建模板说白了就是减少重复工作,每次要开一个Node服务时我们都需要从初始化package.json文件到一步一步安装开发运行依赖,再到程序的初始化。这些工作都很麻烦,最主要的是这些工作只用做一次就好了。我这里建议大家可以自己搭建符合自己的开发模板,不一定要用别人的,适合自己的才是最好的。当模板比较多的时候我们可以选择搭一个脚手架,通过命令行的形式选择自己的模板。脚手架的搭建过程会在后面放出来。

3. 模板结构

|– koa-ts

​ |– config //项目的配置文件夹

​ | |– index.ts

​ |– controllers //控制器

​ | |– homeController.ts

​ | |– index.ts

​ | |– userController.ts

​ |– models // 模型

​ | |– index.ts

​ |– public //公共资源

​ | |– index.ts

​ | |– image

​ |– types // 说明文件

​ | |– index.ts

​ |– utils // 存放工具函数的文件夹

​ | |– index.ts

​ |– app.ts // 入口文件

​ |– handle-public.js // 打包时将public复制到dist目录

​ |– package.json

​ |– README.md

​ |– tsconfig.json

4. 目录说明

config: 存放项目的配置信息,我习惯将各个配置文件分开,然后导入index.ts,再通过index.ts导出,配置分为开发配置和生产环境的配置

// config/index.ts
// process.env.NODE_ENV ?
const devConfig = {
name: 'Koa-ts 模板',
port: 3000,
host: 'localhost'
}

const proConfig = {
name: 'Koa-ts 模板',
port: 3000,
host: 'http://xxx.xx.xx'
}

export = process.env.NODE_ENV ? devConfig : proConfig

controllers: 存放路由以及控制器。

|– controllers //控制器

​ | |– homeController.ts

​ | |– index.ts

​ | |– userController.ts

这里可以把每个模块对应的控制器分成文件夹然后导导index.ts中再导出,路由用了装饰器,路由和控制器二合一。其实也可以把控制器中的方法提取出来,放入到一个service文件夹中,这样开发时只用注意service文件夹即可。

// homeController.ts
import { Controller, Get} from "routing-controllers";

let html = `
<div style="pading: 20px;margin: 30px auto;width: 75%;">
<h3> 装饰器风格的Koa2模板 </h3>
<h4> 装饰器文档地址:<a href="https://github.com/typestack/routing-controllers#installation" target="_blank">routing-controllers</a></h4>
</div>
`
@Controller()
export default class homeController {
@Get("/")
index(){
return html;
}
}

// userController.ts
import {Controller, Param, Body, Get, Post, Put, Delete} from "routing-controllers";

@Controller()
export default class UserController {

@Get("/users")
getAll() {
return `<h1>Hello Koa2</h1>`;
}

@Get("/users/:id")
getOne(@Param("id") id: number) {
return "This action returns user #" + id;
}

@Post("/users")
post(@Body() user: any) {
return "Saving user...";
}

@Put("/users/:id")
put(@Param("id") id: number, @Body() user: any) {
return "Updating a user...";
}

@Delete("/users/:id")
remove(@Param("id") id: number) {
return "Removing user...";
}

}

// index.ts
import userController from './userController'
import homeController from './homeController'

export default [
userController,
homeController,
]

models: 存放模型文件,这里只放了一个文件夹占位,每次项目选用的数据库不同,也不好统一配置。后面的做了脚手架后会将常用的数据库配置以前放在选项中。

public: 放静态资源。

types: 存放自己写的Ts说明文件。

utils: 存放工具函数。

// app.ts 入口文件
import "reflect-metadata";
import { createKoaServer } from "routing-controllers";
import controllers from "./controllers";
import Static = require("koa-static");
import Logger = require("koa-logger");
import config from './config'
const app = createKoaServer({
controllers
});
// 设置静态资源目录
app.use( Static(__dirname + '/public/image') );
// 请求日志信息
app.use( Logger() );
app.listen( config.port ,() => {
console.log( `[${config.name}] 启动成功,http://${ config.host }:${ config.port }` )
});
// handle-public.js 打包时将public文件夹复制到dist目录
const shell = require('shelljs')
shell.cp('-R',"./public/","./dist/")
{
"name": "koa-ts",
"version": "1.0.0",
"description": "koa2模板",
"scripts": {
"start": "npm run serve",
"serve": "node ./dist/app.js",
"build": "tsc && node handle-public.js",
"dev": "cross-env NODE_ENV=development nodemon -e ts,tsx --exec 'ts-node' ./app.ts"
},
"repository": {
"type": "git",
"url": "git+https://github.com/q389491729/koa-ts.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/q389491729/koa-ts/issues"
},
"homepage": "https://github.com/q389491729/koa-ts#readme",
"devDependencies": {
"@types/koa": "^2.0.49",
"@types/koa-logger": "^3.1.1",
"@types/koa-static": "^4.0.1",
"@types/node": "^12.7.4",
"@types/koa-bodyparser": "^4.3.0",
"@types/koa-router": "^7.0.42",
"cross-env": "^5.2.1",
"nodemon": "^1.19.2",
"shelljs": "^0.8.3",
"ts-node": "^8.3.0",
"typescript": "^3.6.3"
},
"dependencies": {
"koa": "^2.8.1",
"koa-bodyparser": "^4.2.1",
"koa-logger": "^3.2.1",
"koa-multer": "^1.0.2",
"koa-router": "^7.4.0",
"koa-static": "^5.0.0",
"reflect-metadata": "^0.1.13",
"routing-controllers": "^0.7.7"
}
}

开发时: npm run dev 。支持热更新

打包上线:npm run build

如果使用自动构建上传工具需要自行额外配置。

5. 怎么使用

从github上克隆下来,安装依赖,运行。

git clone https://github.com/q389491729/koa-ts
cd koa-ts
npm install
npm run dev

打开浏览器输入: localhost:3000 ,出现以下画面即为成功。

文章作者: Code Pirate
文章链接: http://blog.xswhb.cn/2019/09/15/Koa-ts-模板搭建/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Code Pirate

评论