koa2 作为 nodejs 中面向未来的 web 开发框架,对于想做全栈的工程师基本是必学的,但是它并不是一个开箱即用的框架,很多必要模块需要我们自己去安装配置,整个项目框架都需要我们自己搭建,因此我把自己搭建框架的步骤记录下来,仅供参考。
初始化项目
代码语言:javascript复制mkdir koa2-demo
cd koa2-demo
yarn init
安装 koa、koa-router
代码语言:javascript复制// 安装koa、koa-router
yarn add koa koa-router
// 安装类型提示
yarn add -D @types/koa @types/koa-router
安装 typescript、ts-node
代码语言:javascript复制// 因为我们用 ts 来开发,所以需要 ts-node 来运行项目
yarn add -D ts-node typescript
配置 ts
代码语言:javascript复制tsc --init
在 tsconfig.json 文件中将 target 修改为 EXNEXT,moduleResolution 设置为 node,否则在进行模块导入的时候会报找不到文件,切记 module 一定要为 commonjs,这是 nodejs 所遵循的标准。
项目结构调整
koa2可以完全使用单文件开发服务器,但是我相信没有人会这样做,为了方便开发,我们需要调整项目结构,使项目目录清晰明朗,为后期扩展打下基础。
初始化项目结构
在根目录下创建 src 目录,用来存储我们的项目逻辑,在 src 目录下创建 router 目录,将路由处理放在下面
代码语言:javascript复制- src
- router
- index.ts
- app.ts
- main.ts
- README.md
初始化路由配置
代码语言:javascript复制// src/router/index.ts
import KoaRouter from 'koa-router';
const router = new KoaRouter();
export default router;
初始化 koa 服务
代码语言:javascript复制// src/app.ts
import Koa from 'koa';
import router from './router';
import { Server } from 'http';
// 创建服务对象
const app = new Koa();
// 引入路由
app.use(router.routes());
app.use(router.allowedMethods());
// 启动服务
const runServer = (port: number): Server => {
console.log('Server running on port 3000');
return app.listen(port);
};
export default runServer;
代码语言:javascript复制// src/main.ts
import runServer from './app';
runServer(3000);
配置服务启动命令
代码语言:javascript复制// package.json
{
...
"scripts": {
"start": "ts-node ./src/main.ts"
},
"dependencies": {
...
},
"devDependencies": {
...
}
}
服务热加载
安装 nodemon
代码语言:javascript复制yarn add -D nodemon
配置 nodemon
在根目录下增加 nodemon.json 文件
代码语言:javascript复制{
// 延迟重载
"delay": 1000,
// 监听的目录和文件
"watch": ["src/**/*.ts"],
// 忽略的目录
"ignore": ["node_modules"],
// 执行的命令
"exec": "ts-node ./src/main.ts",
// 监听的文件后缀
"ext": "ts"
}
配置环境变量读取
代码语言:javascript复制yarn add dotenv
yarn add -D @types/dotenv
加载环境变量
- 创建环境变量文件 .env
// .env
NODE_ENV=dev
SERVER_PORT=3300
- index.ts 中引入
// 在文件头部
import dotenv from 'dotenv';
dotenv.config();
- 创建配置文件 src/config/index.ts
const config = {
server: {
port: Number(process.env.SERVER_PORT) || 3300,
},
};
export default config;
使用环境变量
在 index.ts 中指定启动端口
代码语言:javascript复制import config from './src/config';
runServer(config.server.port);