从零到一构建koa+ts项目（初始化）

基于 koa2 + ts 构建 后端服务（持续更新~）

1 - 初始化

# 创建目录
mkdir koa-ts-demo
# 生成 package.json
npm init -y
# 安装 ts 执行环境
npm install --save-dev typescript @types/node ts-node
# 生成 tsconfig.json
npx tsc --init
# 初始化 git 仓库
git init
1
2
3
4
5
6
7
8
9
10

根目录创建 .gitignore

node_modules
*.env
1
2

2 - 修改 package.json “scripts” 节点

{
	...
	"scripts": {
    	"serve": "nodemon --watch src/**/* -e ts,tsx --exec ts-node ./src/index.ts"
  	},
	...
}
1
2
3
4
5
6
7

3 - 配置 @ 别名

npm install --save-dev module-alias @types/module-alias
1

3.1 - 修改package.json

{
	...
	"_moduleAliases": {
    	"@": "./src"
  	}
	...
}
1
2
3
4
5
6
7

3.2 - 修改tsconfig.json

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "es2016",

    /* Modules */
    "module": "commonjs",
    "types": ["node"],
    // "rootDir": "./",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },

    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,

    /* Type Checking */
    "strict": true,
    "skipLibCheck": true
  },
  "exclude": ["node_modules"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

3.4 - 调整目录

根目录下新建 src 目录 ， 创建index.ts

// 建议放到最顶层
import "module-alias/register";
1
2

4 - 配置环境

npm install --save-dev dotenv
1

在 src/tools 目录下 新建 env.ts

import path from "path";

import dotenv from "dotenv";

dotenv.config({ path: path.resolve('.env') });
switch (process.env.NODE_ENV) {
  case "develop":
    dotenv.config({ path: path.resolve('develop.env') });
    break;
  case "production":
    dotenv.config({ path: path.resolve('production.env') });
    break;
  default:
    console.error('error: Lack of environment differentiation (NODE_ENV)');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

根目录下 .env | .develop.env | .production.env 配置

修改 src 目录下的 index.ts

import "module-alias/register";

import "@/tools/env";
1
2
3

5 - app初始化

npm install --save koa
npm install --save-dev @types/koa
1
2

src 目录下 新建 app 目录，app 目录下 新建 index.ts

import Koa from "koa";

const App = new Koa();

export default App;
1
2
3
4
5

修改 src 目录下的 index.ts

import "module-alias/register";

import "@/tools/env";
import App from "@/app";

App.listen(process.env.SERVER_PORT, () => {
  console.log('hello koa!', process.env.SERVER_PORT);
});
1
2
3
4
5
6
7
8

6 - 优化命令行

# chalk5 版本有问题
npm install --save-dev chalk@4
1
2

src/config 目录下 新建 index.ts

import { readFileSync } from "fs";
import { resolve } from "path";
import { networkInterfaces } from "os";

const buffer = readFileSync(resolve('package.json'));
const packages = JSON.parse(buffer.toString());

const network = networkInterfaces();
const network_address: string[] = [];
Object.keys(network).forEach((key) => {
    // @ts-ignore
    network[key] = network[key].filter((item) => item.family === 'IPv4');
    // @ts-ignore
    network[key] = network[key].map((item) => item.address);
    // @ts-ignore
    network_address.push(network[key][0]);
});

export const project = packages.name;
export const host_list = network_address;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

修改 src 目录下的 index.ts

import chalk from "chalk";
import "module-alias/register";

import "@/tools/env";
import App from "@/app";

import { project, host_list } from "@/config";

App.listen(process.env.SERVER_PORT, () => {
  const server = `${project} running success!`;
  console.log(chalk.bgGray.bold(server));
  console.log(chalk.green('\tNetwork:'))
  host_list.forEach((host: string) => {
    console.log(`\t\t${process.env.HTTP_TYPE}://${host}:${process.env.SERVER_PORT}`);
  });
  console.log(chalk.bgGray.bold(server.split('').reduce((pre, curr) => pre + '+', '')));
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

-------------------------------------------------------至此 koa 项目的 初始化就完成了-------------------------------------------------------
目录结构

koa-ts
├── src
│   ├── app
│   ├── config
│   ├── tools
│   └── index.ts
├── .gitignore
├── .env
├── .develop.env
├── .production.env
├── .eslintrc.js
├── package-lock.json
├── package.json
└── tsconfig.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14

为了不使篇幅过长，所以中间件配置及其他的一些配置放到另外的文章。