TypeScript查缺补漏【TS自动重启+自动运行+parcel自动打包】

自动重启和自动运行

1. 初始化 npm init -yes 出现package.json
2. 安装typescript
   全局安装：

   cnpm i typrscript -g
   

   
   本地安装：

   cnpm i typescript -D
   

   
   yarn 安装：

   yarn global add typescript
   

3. 生成tsconfig.json 文件

   tsc --init
   

4. 修改tscongig.json配置

   "outDir": "./dist",
   "rootDir": "./src",
   

   
   注意：dist src 和package.json必须在统一目录下
5. 编译src目录以及子目录下的ts文件
   tsc [src当前目录下输入：tsc 注意直接写tsc命令即可]
   [会把src目录即子目录下的ts文件全部编译成js文件，并全部输出到dist目录中]
6. 安装ts-node
   ts-node让node能直接运行ts代码，无需使用tsc讲代码转换为js代码【ts-node则包装了node，它可以直接运行js代码】
7. 安装nodemon工具【自动检测工具】
   作用：【nodemon可以自动检测到目录中的我呢见更改时通过重新启动应用程序来调试基于node.js的应用程序，建议全局安装】
8. 在package.json中配置自动检测，自动重启应用程序
   nodemon --watch src/ 表示检测目录是package.json同级目录src
   -e ts 表示nodemon 命令准备要监听的是ts后缀的文件
   -exec ts-node ./src/project/app.ts表示检测到src目录下有任何变化，都要执行app.ts文件

    "scripts": {
       "startparcel":"parcel ./index.html", 
       "start": "nodemon --watch src/ -e ts --exec ts-node ./src/index.ts"
     },
   

9. 运行

   yarn start
   

Parcel打包支持浏览器运行ts文件

1. 安装Parce打包工具，npm install parcel-bundler --save-dev
2. 配置package.json

   "startparcel":"parcel ./index.html",
   

3. 运行：
   在index.html文件内使用引入js文件的方式引入TS文件，然后控制台输入以下命令，成功后浏览器访问‘http://localhost:1234 ’即可查看代码运行效果，伴随着代码的修改保存文件后自动更新

   yarn startparcel
   

 补充：VScode快速运行js或ts文件

打开目标文件，然后使用快捷键：CTRL + ALT + N

注：如果运行ts文件出现打印乱码的情况，可以尝试安装ts-node依赖后在其尝试