步骤:
1 初始化npm init -y 出现package.json
2 安装typescript npm i typescript -g
3 生成tsconfig.json文件 tsc --init
4 修改tsconfig.json中的配置
"rootDir": "./src", //ts源文件保存的目录
"outDir": "./dist",//ts编译后生成js文件保存的目录
注意:dist src package.json必须在一个目录
5 安装ts-node
ts-node让node能直接运行ts代码,无需使用tsc将ts代码编译成js代码(ts-node包装了node,它可以直接运行ts代码)
npm i ts-node -D
6 安装nodemon工具(自动检测工具)
nodemon作用:[nodemon可以自动检测到目录中的文件更改时通过重新启动程序来调试基于node.js的应用程序]
npm i nodemon -D
7.在package.json中配置自动检测,自动重启应用程序
"scripts": {
"start": "nodemon --watch src/ -e ts --exec ts-node ./src/index.ts",
},
nodemon --watch src/ 表示检测目录是package.json同级目录src
--e ts 表示nodemon命令准备将要监听的是ts后缀的文件
--exec ts-node ./src/project/index.ts 表示检测到src目录下有任何变化,都要重新执行index.ts文件
8.新建一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="src/index.ts"></script>
</head>
<body>
</body>
</html>
9. Parcel打包支持浏览器运行TS文件
(1)安装 parcel打包工具 npm i parcel-bundler -D
(2)在package.json中给npm添加启动项,支持启动parcel工具包
"scripts": {
"start": "nodemon --watch src/ -e ts --exec ts-node ./src/index.ts",
"startparcel":"parcel ./index.html"
}
(3) 启动parcel工具包
npm run startparcel
所以最后整个环境的目录是这样子的