难凉热血

# 1. node 版本

由于 koa2 已经开始使用 async/await 等新语法，所以请保证 node 环境在 7.6 版本以上。

# 2. 创建项目

首先，创建一个目录 koa2-tutorial/ 用来存放我们的代码。然后执行如下命令，开始初始化项目：

# 创建 package.json 文件。该文件用于管理项目中用到一些安装包
npm init -y
1
2

项目初始化完成后，在创建的目录里，会生成 package.json 文件。

# 3. 安装 TypeScript

TypeScript 目前已逐渐成为前端项目开发的基础配置，所以本系列教程也基于 TypeScript 进行开发。

请在项目的根目录下运行如下命令，安装 TypeScript :

npm i typescript -D
1

安装成功之后，我们需要先创建 TypeScript 的编译配置文件 tsconfig.json ，继续在根目录下执行如下命令：

npx tsc -init
1

执行完之后，根目录下会生成一个 tsconfig.json 文件，根据实际项目的需求可对该文件内的内容进行修改，本项目的 tsconfig.json 文件配置如下：

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "allowJs": true,
    "sourceMap": false,
    "outDir": "./dist" /* 将编译结果输出到该目录中 */,
    "noImplicitAny": true
  },
  "include": ["src/**/*"]
}
1
2
3
4
5
6
7
8
9
10
11
12

至此， TypeScript 安装完毕。

# 4. 安装 Koa

接下来，继续在根目录下执行如下命令，安装 Koa 和类型文件 @types/koa ：

# 安装koa
npm i koa -S

# 安装koa的类型文件
npm i @types/koa -D
1
2
3
4
5

安装成功后，我们在根目录下创建 src 文件夹，并创建 src/app.ts 文件 ，写入如下代码：

import * as Koa from "koa";
const app = new Koa();

app.listen(3000, () => {
  console.log("server is running at http://localhost:3000");
});
1
2
3
4
5
6

# 5. 安装 nodemon

nodemon 是一款非常实用的工具，用来监控你 node.js 源代码的任何变化和自动重启你的服务器。以前，我们开发一个 node 后端服务时，每次更改文件，均需重启一下服务才能生效。使得我们的开发效率降低了很多。 nodemon 的出现，可以随时监听文件的变更，自动重启服务，我们开发时只需关注代码即可，不再需要手动重启服务。

在项目的根目录下运行如下命令，安装 nodemon :

npm i nodemon -D
1

安装成功之后，我们需要创建 nodemon 的编译配置文件 nodemon.json ，并向其写入如下内容：

{
  "ignore": [
    ".git",
    ".vscode",
    ".idea",
    "node_modules/"
  ] /* 忽略监听的文件目录 */,
  "watch": [
    "src"
  ] /* 需要监听的文件目录，该目录下任意文件发生变化，都会重启服务 */,
  "exec": "npm start" /* 重启服务时执行的命令，为npm script的start脚本 */,
  "ext": "ts" /* 监听的文件后缀 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 6. 添加 npm script 项目启动脚本

打开 package.json 文件，并在 script 中添加如下内容：

"scripts": {
  "start": "tsc && node dist/app.js",
  "dev": "nodemon"
}
1
2
3
4

我们在 script 中添加了两个脚本命令，分别名为： start 和 dev 。我们分别解释下这两个脚本的作用。

  • start: 这行脚本中包含了两部分内容： tsc 和 node dist/app.js 。tsc 是将项目中的 .ts 文件编译成 js；node dist/app.js 是执行 dist 目录下的 app.js 文件。由于我们在 tsconfig.json 中将 tsc 的编译结果输出目录设置为根目录下的 dist 文件夹，所以需要执行最终编译生成的 dist/app.js 。这两部分内容使用 && 连接，表示这两条命令是继发执行关系。所谓继发执行，就是指前一条命令执行成功后再执行后一条命令。由于我们的项目是用 TypeScript 进行开发的，所以在启动项目的时候需要先将 ts 编译成 js 。等待编译完成后就可以使用 node app.js 启动项目了。
  • dev: 这行脚本是启动 nodemon 并使用根目录下的 nodemon.json 作为配置文件。

# 7. 启动项目

Ok，到这里后，我们就可以开始启动项目了，请在根目录下执行如下命令：

npm run dev
1

此时命令行中会输出如下内容：

$ npm run dev

> ts_koa2@1.0.0 dev /Users/nlrx/code/ts_koa2
> nodemon

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*
[nodemon] watching extensions: ts
[nodemon] starting `npm start`

> ts_koa2@1.0.0 start /Users/nlrx/code/ts_koa2
> tsc && node dist/app.js

server is running at http://localhost:3000

...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

至此，开发环境就已经搭建成功了！

最终得到的项目目录结构如下：

├─src
│ ├─app.ts
├── package.json
├── tsconfig.json
├── nodemon.json
1
2
3
4
5

← 02.中间件 →