构建TypeScript运行环境(TS 自动重启 + TS自动运行 + Parcel自动打包)

HappyCodingTopOne

已于 2023-03-01 10:42:00 修改

阅读量376

点赞数

分类专栏： typeScript 文章标签： typescript

于 2023-03-01 10:40:51 首次发布

本文链接：https://blog.csdn.net/weixin_43852916/article/details/129276387

版权

typeScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

步骤：

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