本文章旨在配置一个自动编译运行typescript的环境，阐述几种常用的配置方式，这些方式并不冲突，只是应用环境有异，可以对应具体情况选择具体环境。

tsc + nodemon

只针对某一个文件去编译

npm i typescript -g
// 监测修改
tsc xxx.ts -w
// node运行
node xxx.js
// nodemon检测js
npm i -g nodemon
nodemon xxx.js

可以直接看到得到的文件（默认在源文件夹下）

ts监测

js监测
nodemon 一般只在开发时使用，它最大的长处在于 watch 功能，一旦文件发生变化，就自动重启进程。
nodemon相关

tsconfig.json 编译

// 初始化tsconfig.json
tsc -- init

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。一个项目可以通过以下方式之一来编译：
使用tsconfig.json

不带任何输入文件的情况下调用tsc，编译器会从当前目录开始去查找tsconfig.json文件，逐级向上搜索父目录。
不带任何输入文件的情况下调用tsc，且使用命令行参数—project（或-p）指定一个包含tsconfig.json文件的目录。

当命令行上指定了输入文件时，tsconfig.json文件会被忽略。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "rootDir": "./src", 
    "outDir": "./dist"
  },
  "include": ["src/*.ts"]
}

具体的配置可以查看tsconfig配置项。

nodemon配置

首先明确一点nodemon只会监测一个js文件，不过可以通过设置配置文件来监测其他文件变化后对该文件输出的影响（比如import了其他文件的function）
配置文件还可以设置重新启动命令和端口信息

{
    "restartable": "rs",
    "ignore": [
        ".git",
        "node_modules/**/node_modules"
    ],
    "verbose": true,
    "execMap": {
        "": "node",
        "js": "node --harmony"
    },
    "watch": [
        "dist/*.js"
    ],
    "env": {
        "NODE_ENV": "development",
        "PORT": "3000"
    },
    "ext": "js json",
    "legacy-watch": false
}

具体配置项目可以查看链接

ts-node调试

两步(tsc xx.ts, node xx.js)变为一步(ts-node xxx.ts)

npm i ts-node -g

vite

类似于live-server 不过html可以直接读TypeScript文件

1. npm init
2. npm i vite -d
3. update package.json add script vite 
4. tsc --init
5. update tsconfig.json config (rootDir and outDir)
6. create html
7. npm run dev (execute vite)

具体项目配置可以查看链接

编程记录