搭建koa + TS的开发环境
发布于 5 年前 作者 dingyuanwu 6033 次浏览 来自 分享

基础

下面介绍怎样搭建koa + typescript的开发环境。

初始化

首先,初始化项目:

mkdir koa-demo
cd koa-demo
npm init

然后,安装Typescript,你可以选择是安装到全局还是当前的开发环境。

全局:

npm install -g typescript

开发环境:

npm install -D typescript

具体的可以参考Typescript的官网的介绍:Typescript

koa要使用TS进行开发,需要引入types定义,这里我选择的是koa + koa-router的组合。

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

tsconfig.json

先放官网的链接:tsconfig.json

这里推荐使用tsc进行初始化tsconfig.json,然后基于初始化的模版配置自己的内容。

初始化:

tsc --init

定制自己的tsconfig.json:

{
	"compileOptions": {
    "experimentalDecorators": true,
    "target": "ES5", 
    "module": "commonjs",
    "allowJs": true, 
    "declaration": true,
    "outDir": "dist",
    "strict": true, 
    "moduleResolution": "node", 
    "esModuleInterop": true, 
    "inlineSourceMap": true, 
    "forceConsistentCasingInFileNames": true
	},
	"compileOnSave": true,
  "include": ["src/**/*"],
  "exclude": ["node_module/**/*", "**/*.test.ts"]
}

配置的具体含义自行到官网查阅,这里重点说两个:experimentalDecorators和inlineSourceMap。 inlineSourceMap是debug时用到的重要的配置,这个配置可以保证使你在debug的时候不用关心编译后的文件,只在ts文件中打断点即可。

experimentalDecorators主要是忽略注解,但是这个在tsconfig中开启还不够,vscode中还有一个配置项,也需要开启,操作方法: 在vscode的设置中搜索experimentalDecorators,将设置为true即可。

运行项目:

tsc && node dist/index.js

到这里,基本的环境就准备好了,后续的开发的过程中,引入新的package的时候也将其对应的types安装到开发环境就可以舒服的使用ts了(但是有部分package没有支持ts)。

进阶

上面已经准备好基础的开发环境,可以开始进行开发了,但是你会发现,问题一大堆:怎样启动我的程序?怎样调试?怎样修改代码后自动更新?下面一一到来。 想要很好的在开发环境使用ts,首先需要了解两个工具: nodemon ts-node

npm i nodemon ts-node --save-dev

想要使用vs code的debug功能还需要配置下settings.json和launch.json文件。参考:vs code nodejs debugging。 launch.json的配置比较简单,使用vs code默认的launch配置就行。 然后在settings中开启debug的配置:

  "debug.node.autoAttach": "on",
  "debug.allowBreakpointsEverywhere": true

现在完成了基本的配置工作,下面来完成npm script。具体参数的含义,这里就不做过多的解释,自行使用-h查看。

"scripts": {
    "start": "tsc && node dist/index.js",
    "dev": "DEBUG=koa* NODE_ENV=local nodemon -w src/**/*.ts -e ts --exec 'node -r ts-node/register ./src/index.ts'",
    "debug": "DEBUG=koa* NODE_ENV=local nodemon -w src/**/*.ts -e ts --exec 'node -r ts-node/register --inspect ./src/index.ts'"
  },

现在就可以愉快的使用TS进行开发了。

回到顶部