前言

在阅读本文之前，我假设你已经了解了什么是 TS（typestript），和 KOA。如果不认识的话，建议先通过以下渠道了解。

• KOA 官网
• 阮一峰 KOA 教程
• Typescript 官网
• Typescript 菜鸟教程

目的

本文是一个非常简单的教程，其目的在于从零搭建支持 TS 的开发环境，开发 KOA，且支持热重载。网上有不少这种教程，但是很多都是知其然不知其所以然，让我在学习的时候也是一头雾水，即使照着操作了成功，也不知道为什么，在发生其他情况时更加不知道怎么解决。所以我将以一种发现问题，分析问题，解决问题的思路来开始本文。

思路

既然是从零开始，那么我们的初始项目就只有通过 npm init 创建的 package.json 文件。我们需要解决以下的问题：

1. 如何支持 TS 语法？
2. 如何以 TS 的语法开发 KOA？
3. 如何实现开始时的热重载？

我们将会逐步解决以上的问题。

初始的项目

在终端中输入命令 npm init ，npm 会在终端中要求你输入一些参数，作为项目的信息，然后就会下当前目录下生成一个 package.json 文件。假设我们的项目名为 my-ts-koa，生成后项目的结构如下：

没错，除了一个 package.json 文件外什么都没有，我们需要自己安装需要的工具。 package.json 文件的内容在上图的右侧，同样也是什么都没有。

安装 TS

你可以在网络上轻松找到安装 TS 的方法，比如这个 TypeScript in Your Project。

在终端中输入 npm install typescript --save-dev 安装到我们的项目中，要注意 --save-dev，在下文中也会使用它的别名：-D，因为我们只在开发时候用到 TS。安装好后，你会在 package.json 文件的 devDependencies 节点下找到 typescript。

安装后就可以使用 tsc 命令执行 TS 的编译，在下文中我将用 tsc 指代 ts 编译器。

你应该知道 ts 语法最终还是会转译成 JS 语法，转译时需要的配置，会在根目录的 tsconfig.json 文件中提供。所以我们要执行命令：tsc --init 初始化一个 TS 配置文件。配置的参数众多，你可以在这个网站上查找：tsconfig.json 配置参数。在这里我介绍三个重要的配置：

1. files：指定一个包含相对或绝对文件路径的列表。
2. include：指定一个文件 glob 匹配模式列表。
3. exclude：指定一个文件 glob 匹配模式列表。

在这里，files 和 include 指定的文件会被 tsc 编译，如果没有指定，将会默认包含当前目录和子目录下所有的 TypeScript 文件；exclude 指定的文件会被 tsc 忽略编译。

这个项目里我们的 TS 代码会写在 src 目录下，我们只希望 tsc 编译我们的源码，并且不希望编译 node_modules 目录！所以我们要在 tsconfig.json 添加如下的参数：

{
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

要清楚上面两个参数的作用。

你看，这是一个很简单的 TS 环境，如果有其他需要，可以随时往 tsconfig.json 里修改配置。这些简单的配置说了那么多，但是唯一的重点是：在 tsconfig.json 配置参数 里找到需要的配置说明。

现在我们的项目中没有 src 目录和 ts 文件。我们就新建一个吧，并开始我们的 KOA 代码。

在 TS 中安装 KOA

就跟在其他环境中安装 koa 一样，在终端里输入：npm i koa。然后新建我们的 ts 文件：src/main.ts，然后用 TS 的语法写下 koa：

import Koa from "koa";

const app = new Koa();

app.use(async (ctx) => {
  ctx.body = "Hello World";
});

app.listen(3000);

然后你就会发现编辑器给你如下的错误：

这个时候你要怎么办：

1. 发呆
2. 问群友
3. 发帖求助
4. 百度

这个时候你就要先睁大眼睛，先看看什么错误！把你的鼠标放在红线下方，看看编辑器给你提示了什么错误！不要到群里问：“啊我报错了这是怎么回事？”

改天有时间我再写一个“如何提问”。

鼠标放上第一行，你应该会看到如下的信息：

找不到模块，我们明明导入了 KOA，却说找不到 KOA 的模块。这是因为 TS 是有类型系统的，而 JS 库是没有类型系统的，这样一来，如果在 TS 代码里导入了 JS 库，TS 不知道导入的 JS 库的类型。并且 TS 使用的模块系统是 ES6，很多 JS 库使用的是 CommonJS 的模块，导致了 TS 不认识 JS 库的模块。

解决办法是使用 TS 的类型声明文件。意思就是说：“你 JS 不是没有类型系统吗，那我给你定义一个类型吧”。好在对于这些 JS 库，我们通常不需要自己定义声明文件，这些库通常都会提供，所以我们只需要导入他们的类型声明文件即可。

导入类型声明文件，以 KOA 为例子，在终端中输入：npm i -D @types/koa，便会将 koa 的类型声明文件加入项目的开发依赖，因为只需要在开发时需要类型声明，所以加了参数：-D。类型声明文件都会遵循以下的命名：@types/<模块名>，如我们需要的模块是 koa，那么声明文件就是：@types/koa。其他模块的类型声明都以同样的方法添加。

添加完声明文件后，编辑器提示的错误就会消失。

如何运行 TS 文件

按照一般的流程，TS 代码写完后要先编译成 JS 代码，然后运行 JS 代码。但是这样在我们的开发环境中太麻烦了，最好的情况当然是能够直接运行啦。

由于我们编写的 koa 是运行在 node 环境的服务器，我们要用 node 命令来运行。但是 node 不能直接运行 ts 代码，所以需要额外的插件。

在这里，我们将用到 esbuild-register 运行 TS 代码。除了这个方式，你应该能够在网络上找到其他的方法运行。

首先安装 esbuild-register，在终端中运行 npm i -D esbuild-register，同样注意 -D。

安装好之后就可以用 node 来运行 ts 文件。

node -r esbuild-register src/main.ts

上面，使用了参数 -r，意思是预先加载，加载什么？加载跟随在 -r 后面的 esbuild-register，然后执行 main.ts 文件。

更多 node 的参数，在终端中输入 node -h 查看。

如果每次启动都这样写命令就太麻烦了，我们把它写进 package.json 的 scripts 节点中，如下：

{
  "scripts": {
    "start": "node -r esbuild-register src/main.ts"
  }
}

之后我们就可以直接输入命令：npm start 来启动项目。

热重载

能够启动 TS 项目后，我们希望能够在开发时，修改了代码后能够自动运行最新的代码，实时查看效果，即热重载。

在这之前，如果我们要重新启动项目的话，需要手动终止，然后再手动启动，要实现热重载的功能，还是需要有工具来帮我们做。

这里我们介绍到的工具就是 nodemon，nodemon 官网

简单地说，nodemon 的功能就是监听文件，在文件有变动后执行一些东西。所以我们要利用这个功能，监听源文件，在我们修改了源文件后让它帮我们重新运行。

先在项目下安装，运行 npm i -D nodemon。

介绍几个我们需要用到的 nodemon 参数：

• --watch：监听文件，支持通配符
• --delay：在文件变动后延时执行命令
• -e：指定监听文件的扩展名
• --exec：文件变动后要执行的命令

组合起来，我们要执行如下的命令：

nodemon --watch src/**/* --delay 1500ms -e ts --exec npm start

意思是：监听 src 目录下所有文件（--watch），且扩展名是 ts 的文件（-e），文件变动 1500ms 后再执行（--delay），要执行的命令为 npm start（--exec）。

同样为了方便，我们把它放在 scripts 中。

{
  "scripts": {
    "dev": "nodemon --watch src/**/* --delay 1500ms -e ts --exec npm start"
  }
}

接着，只需要运行 npm run dev，就能启动热重载的开发环境。

去掉不需要的部分

最后，到了这一步，不知道你发现了没有，虽然说我们支持了 ts，安装了 typescript 包和配置了 tsconfig.json 文件，但是我们居然没有使用到 tsc 命令！

如果你发现了，那真的太好了。那么接下来，我们就要将这部分不需要的去掉。

“天啊，那你前面啰里啰唆的安装 ts 的环境是在干嘛？”

你一定会遇到按照网络上的教程安装了一大堆东西的情况，如果不去思考这堆东西是什么，那么我估计你的项目里一定有很多不需要的依赖。所有，本文的目的是希望新手能够去思考，去学习接触到的这些新名词是什么，这些参数是什么，才能够做到学的东西是自己的。而不是教程以外的东西不会用！

现在，你自己试试，把项目里不需要的依赖去掉，很简单的。

参考

nodemon by nodemon

typescript by Microsoft

esbuild-register by Kevin

KOA 官网 by KOA

阮一峰 KOA 教程 by 阮一峰

标签：npm,文件,KOA,TS,ts,--,思考
来源： https://www.cnblogs.com/dvorakchen/p/16359200.html