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