使用 Koa + TS + ESLlint 搭建node服务器的过程详解

目录初始化项目环境准备安装环境初始化 tsconfig.json简单搭建 Koa 服务器完整项目搭建依赖安装构建目录结构修改 package.json代码规范eslintprettier

初始化项目

环境准备

与之前使用JavaScript 开发后台不同，区别如下：

自动编译运行的插件由nodemon替换为ts-node-dev。在TypeScript环境下，需要使用到ES6模块化规范。而非CommonJS规则。使用TypeScript语法进行开发，再开发结束后，需要进行编译打包为JavaScript去运行。

安装环境

yarn global add ts-node-dev typescript

ts-node-dev：与nodemon功能类似，在修改代码之后，保存即可生效，无需手动重启。

# 例如 ts-node-dev src/app.ts # 如果想要监听文件的改变需要加上 –respawn 参数 ts-node-dev –respaswn src/app.ts # 使用简短的别名 tsnd –respawn src/app.ts

初始化 tsconfig.json

# 生成tsconfig.json tsc –init

修改tsconfig.json如下：

{ “compilerOptions”: { “target”: “esnext”, // 目标语言版本 “module”: “commonjs”, // 指定生成代码的模板标准 “sourceMap”: true, “outDir”: “./dist”, “rootDir”: “./src”, // 指定输出目录, 默认是dist文件夹 “strict”: true, “esModuleInterop”: true, “allowSyntheticDefaultImports”: true, “skipLibCheck”: true, “forceConsistentCasingInFileNames”: true }, // 需要编译的的文件和目录 “include”: [“src”], “exclude”: [“node_modules”, “dist”, “public”] }

简单搭建 Koa 服务器

# 依赖安装 yarn add koa yarn add typescript -D # 依赖注解 yarn add @types/koa -D

再app.ts中实例化一个服务器。

import Koa, { DefaultContext, DefaultState, Context } from Koa const app: Koa<DefaultState, DefaultContext> = new Koa() app.use(async (ctx: Context) => { ctx.body = coderlzw }) app.listen(3000, () => { console.log(服务启动成功，running http://127.0.0.1:3000) })

再package.json中添加调试脚本：

“scripts”: { “dev”: “ts-node-dev –respawn app.ts” }

启动服务：

现在，我们使用Koa和TypeScript搭建了一个简单的服务器，我们http://127.0.0.1:3000便可以再浏览器中看到”coderlzw“

完整项目搭建

依赖安装

# 依赖安装 yarn add koa koa-router koa-cors koa-bodyparser dotenv yarn add ts-node-dev npm-run-all typescript -D # 依赖注解 yarn add @types/koa @types/koa-bodyparser @types/koa-router @types/koa-cors -D

dotenv是一个零依赖的模块，它能将环境变量中的变量从.env文件加载到process.env中。

在根目录下创建.env文件

HOST=localhost PORT=3000

在*.js/*.ts中使用

import dotenv from dotenv dotenv.config() const { PORT, HOST } = process.env

npm-run-all是一个批量执行npm脚本的工具。

构建目录结构

service ├─ package.json ├─