TS文件的自动编译运行和parcel自动打包构建

1. TS 自动重启 + TS 自动运行

步骤如下：

（1）初始化 npm init --yes 出现 package.json

（2） 安装 typescript

# 全局安装
cnpm i typescript -g
# 本地安装
cnpm i typescript -D
# yarn全局安装
yarn global add typescript

注：cnpm i typescript -D 是 cnpm install typescript --save-dev 的缩写

(3）生成 tsconfig.json 文件

tsc --init

（4）修改 tsconfig.json 中的配置

"outDir": "./dist" // 是ts编译后生成js文件保存的目录, 对应的命令行选项为 --outDir
"rootDir": "./src" // 是自己编写的ts源文件所在的目录, 对应的命令行选项为 --rootDir

注意: dist 、src 、package.json 三者必须是在一个目录下

（5）编译 src 目录以及子目录下的 ts 文件

# 在项目根目录下：输入tsc后回车
# 会把src目录以及子目录下的ts文件全部编译成js文件，并全部输出到dist目录中】
tsc

（6）安装 ts-node

ts-node 让 node 能直接运行 ts 代码，无需使用 tsc 将 ts 代码编译成 js 代码。

注：ts-node 是包装了 node，它可以直接的运行 ts 代码

# 全局安装
cnpm i ts-node  -g
# 本地安装
cnpm i ts-node  -D
# yarn全局安装
yarn global add ts-node

（7）安装 nodemon 工具 【自动检测工具】
nodemon 作用：自动检测目录中的文件更改，当文件发生更改时，自动重新启动执行应用程序

# 全局安装
cnpm install -g nodemon
# 本地安装
cnpm i nodemon  -D
# yarn本地安装
yarn add nodemon  -D

（8） 在 package.json 中配置自动检测，自动重启应用程序

"scripts": {
	"dev": "nodemon --watch src/ -e ts --exec ts-node ./src/app.ts"
}

• nodemon --watch src/：表示检测目录是 package.json 同级目录 src

• -e ts：表示 nodemon 命令准备将要监听的是 ts 后缀的文件

• --exec ts-node ./src/app.ts：表示检测到 src 目录下有任何变化，都要重新执行 app.ts 文件

就是当 nodemon 检测到 src 目录下的 ts 文件内容发生变更时，自动执行 ts-node ./src/project/app.ts 脚本

2. Parcel 打包支持浏览器运行 TS 文件

• parcel 适合比较轻量级的项目，重量级项目使用 Webpack 或 Vite
• parcel 会监听 ts 文件的变化，然后重新编译

（1）安装 Parcel 打包工具：

# 以下命令等价
npm i -D parcel-bundler
npm install parcel-bundler --save-dev

（2）在 package.json 中给 npm 添加启动项，支持启动 parcel 工具包

"scripts": {
  // 在 index.html 中引入 ts 文件
  "start": "parcel ./index.html"
}

（3）启动 parcel 工具包

# 以下命令等价
cnpm start
cnpm run start