创建可调试,热加载的TypeScript+Koa工程

从零开始创建一个可调试,支持热加载的TypeScript+Koa工程.

本文为了尽量详细,对出现的各种东西都做了简单的介绍,可能会看起来比较啰嗦.

环境搭建

首先,需要一套安装了node,typescript和VScode的开发环境.

安装node的过程就不赘述了,网上一大把.

安装typescript也很简单:

1
npm install -g typescript

安装完成后,使用tsc -v命令,如果出现版本号,则为安装成功.

安装VSCode…也不说了

创建typescript工程

cd到需要创建工程的文件夹后,先建一个工程文件夹,比如我们的工程文件夹叫”koaDemo”.

1
2
mkdir koaDemo
cd koaDemo

创建npm工程:

1
npm init

这个命令会创建package.json 文件,这个文件定义了这个项目所需要的各种模块,以及项目的配置信息.

创建typescript工程:

1
tsc --init

这个命令会创建 tsconfig.json 文件,是用来配置typescript编译的

打开后是所有的可以配置的选项(我猜是所有的),但大多数都被注释了起来,我们需要哪个就把哪个解开注释即可.

我们对此文件进行如下更改:

  1. 把target改成ES2017,改完后这一行是这样的:"target": "ES2017", 这样我们就能使用node本身实现的一些新特性,

  2. 打开sourceMap那一行的注释

    "sourceMap": true,

    这样就能生成.map文件,map文件是用来映射ts文件与生成出来的js文件的,方便我们调试用的.因为我们调试的时候执行的是js文件,但是看的却是ts文件.(不过用ts-node的话,也该就不需要map文件了)

  3. 设置输出文件夹:

    "outDir": "./dist",

  4. 打开静态文件选项

    "strict": true,

  5. 在最后的大括号前添加如下语句(记得上一个大括号后加逗号)

    1
    2
    3
    "include": [
    "src/**/*"
    ],

    最后忽略掉注释后的 tsconfig.json 文件是这样的:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {
    "compilerOptions": {
    "target": "ES2017", /*编译到ES2017版本的js*/
    "module": "commonjs", /*使用commonjs规范*/
    "sourceMap": true, /*生成map文件*/
    "outDir": "./dist", /*输出文件夹*/
    "strict": true, /*启用所有严格的类型检查选项*/
    "noImplicitAny": true, /*允许any类型*/
    },
    "include": [ /*要进行编译的文件*/
    "src/**/*" /*src目录下的所有文件*/
    ],
    }

安装必要的包

因为要创建koa工程,我们要安装koa,然后为了使用路由功能,我们同时也安装koa-router

1
npm install --save koa koa-router

然后安装一些与typescript相关的功能:

1
npm i --save-dev typescript ts-node nodemon

其中,typescript其实我们之前已经全局安装过(使用-g参数),再次安装是为了写入package.json文件中,方便没有全局安装typescript的后来人下载我们的工程后能正常使用.

ts-node可以使我们直接运行ts文件,而不用将ts编译为js文件后再执行,使用它,我们就能快速的进行ts的调试.

nodemon可以监控文件的修改,当文件某文件一旦被修改,nodemon就会自动重启程序,以实现热重载.

你可能发现了,我们安装koa和kouter的时候,使用的是—save,而安装typescript等的时候使用的是--save-dev.

二者有什么区别吗?

打开package.json我们就能发现不同之处:

你会发现,koa在dependencies之下,而typescript等在devDependencies之下.

dependencies是我们项目需要的第三方包,这些包完全用在项目当中,即使是生产环境,我们也应该安装使用这些包.

devDependencies是我们项目开发时使用的包,只是为了我们开发使用的,在生产环境中我们并不需要这些包.

比如typescript是为了编译ts到js,ts-node是为了方便调试,nodemon是为了开发时热重载.

另外,你可能也发现了,devDependencies中我还安装了另外两个包:@types/koa@types/koa-router

这是因为koa和koa-router是使用js写的,ts无法准确的知道其中的类型等,也就无法方便地进行类型检查和代码提示,所以导入这两个包的意义就是补全koa和koa-router中的类型.

同样,只是在开发中才需要,所以:

1
npm i --save-dev @types/koa @types/koa-router

这样,我们这个小例子所需要的所有包,就全部安装完毕了.

写一个hello world

在项目目录下新建一个src文件夹,然后在src文件夹里建一个server.ts文件,在此文件中写下如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Koa from 'koa';              // 导入koa
import Router from "koa-router"; // 导入koa-router

const app:Koa = new Koa(); // 新建一个Koa对象
const router:Router = new Router(); // 新建一个koa-router对象

router.get('/*', async (ctx) => { // 截获所有路由,都指向此函数
ctx.body = "Hello Koa and TS,I am keysking."; // 向浏览器返回数据
})

app.use(router.routes()); // 使用路由

app.listen(8080); // 监听8080端口

console.log("Server running on http://localhost:8080");

然后在工程文件夹下运行tsc命令试一下:

1
tsc

然后你就会发现工程文件夹下出现了一个叫做dist的文件夹,里面有server.jsserver.js.map文件.

map文件我们不管,server.js文件就是我们想要的由ts编译出的js文件,我们执行一下试试:

看起来是在执行了,我们访问一下http://localhost:8080试试:

不错,获得了我们想要的数据,这说明我们的代码生效了.

热重载

此时我们的代码已经可以用了,但是每次我们修改了代码都需要执行一次tsc然后node dist/server.js才能看到修改后的效果,这样很不方便.所以我们使用nodemon对代码进行监听,当代码发生变化的时候,就自动重启应用.

我们在package.jsonscripts中加入下面这一句:

1
"watch-server": "nodemon --watch 'src/**/*' -e ts,tsx --exec 'ts-node' ./src/server.ts"

其中的参数:

—watch 'src/**/*': 监听src目录下的文件

-e ts,tsx: 监听ts和tsx文件

—exrc 'ts-node' ./src/server.ts: 执行方式是使用ts-node运行./src/server.t文件

我们之前说过ts-node文件,使用它,我们可以直接运行ts文件,而省去编译成js文件的过程.

然后我们在命令行运行这个语句:

1
npm run watch-server

可以看到,程序跑起来了,此时我们访问http://localhost:8080,依旧可以获得我们想要返回的hello信息.

那我们修改一下程序试试,把Hello改成Hi.

可以看到,当我们按下⌘+s对文件进行保存的时候,nodemon将程序重启了.

此时我们再访问http://localhost:8080,就看到了Hi的信息,这一切都是自动的,也就是说,我们之后只需要修改代码,然后保存后直接到浏览器查看结果就可以了,完全不需要手动重启程序.

调试TS

有时候,我们需要调试ts代码,这时候vscode就大显神通了.

我们点左边的虫子按钮进入Debug界面,然后点上面的齿轮,打开配置文件:launch.json

刚开始是没有这个文件的,但是我们点击后,vscode会自动帮我们创建这个文件,就放在工程目录的.vscode文件夹下.

打开后里面默认有一些配置,我们把configurations中的数据删除,填入我们的数据,最终launch.json文件是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"version": "0.2.0",
"configurations": [
{
"name": "调试工程",
"type": "node",
"request": "launch",
"args": ["${workspaceRoot}/src/server.ts"], // 当前文件
"runtimeArgs": ["--nolazy", "-r", "ts-node/register"], // --nolazy: 告诉v8引擎提前编译代码,以便断点正常工作 -r ts-node/register: 这可以确保在执行代码之前加载ts-node
"sourceMaps": true,
"cwd": "${workspaceRoot}", // 将工作目录设置为项目根目录
"protocol": "inspector", // 将节点调试协议设置为V8 Inspector模式
}
]
}

然后,我们按下快捷键F5或者右边的小绿三角,就能开始调试了.

我们在想断点的代码前点击,添加断点:

然后开始调试,打开浏览器访问一下试试

果真断了下来.

好了,那么整个可以调试,热重载的typescript+koa工程我们就创建好了~