搭建TS环境，自动运行更新打包

步骤如下：

1、安装 typescript

全局安装 cnpm i typescript -g     

2、初始化生成 package.json

npm init --yes

3、生成tsconfig.json文件

tsc --init  

4、修改 tsconfig.json 中的配置
注意: dist src package.json 必须是在一个目录下

"outDir":  "./dist"  --outDir是ts编译后生成js文件保存的目录
"rootDir": "./src"   --rootDir是自己编写的ts源文件所在的目录

5、编译src目录以及子目录下的ts文件
新建src目录，app.ts，其他文件。目录结构如下

image.png

命令：tsc

输入tsc，会把src目录以及子目录下的ts文件全部编译成js文件，并全部输出到dist目录中

到这步，ts自动编译成js已完成
当然也可以用命令： ts-node xxx.ts 来运行ts文件

---

6、安装 ts-node
ts-node让node能直接运行ts代码，无需使用tsc将ts代码编译成js代码
（ts-node包装了node）

cnpm i ts-node -g   

7、安装nodemon工具并配置
nodemon可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序

cnpm install -g nodemon

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

"scripts": {
    "dev": "nodemon --watch src/ -e ts --exec ts-node ./src/app.ts"
}
// --exec ts-node ./src/project/app.ts 表示检测到src目录下有
// 任何变化都要重新执行app.ts文件

根目录下运行命令 npm run dev ，可以看到控制台中已运行了ts文件的结果
修改src目录下ts文件并保存，会自动更新控制台输出

到这里自动运行，自动更新已完成

---

9、Parcel打包支持浏览器运行TS文件
安装Parcel打包工具：

cnpm install parcel-bundler --save-dev

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

"scripts": {
    "serve": "parcel ./index.html"
},

注意：根目录下新建一个index.html 并导入src下的app.ts

启动parcel工具包,根目录下运行命令：

cnpm run serve

运行后会有一个网址，即可访问了

到这里浏览器访问运行ts已完成，并且会监听变动自动刷新

注意
项目的package.json文件中环境需要有如下2样，版本无须一致

 "devDependencies": {
    "parcel-bundler": "^1.12.5"
  },
  "dependencies": {
    "parcel-bundler": "^1.12.5",
    "typescript": "^4.6.2"
  }