Typescript本地浏览器调试

最新推荐文章于 2024-06-19 16:39:30 发布

自夏

最新推荐文章于 2024-06-19 16:39:30 发布

阅读量711

点赞数

分类专栏： TS Nodejs javascript 文章标签： typescript javascript 开发语言

本文链接：https://blog.csdn.net/qq_39970857/article/details/126562585

版权

37 篇文章 1 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

众所周知浏览器是不能直接跑TS代码的，包括Node.js（也需要插件支持才能直接运行 ts-node 包）也不能直接运行TS代码（deon.js 除外，内置有TS运行时）

最近一直在维护自己写的 TS npm 包，包含平常我在工作中常用的工具类（JS，Node，uni-app，等 ) 常用的函数，由于涉及到 DOM,BOM 等不能用 JavaScriptRunTime 来运行，调试器起来很烦

安装所需包 ( 我这里是使用的 pnpm ,当然也可以用 npm,cnpm，yarn ,npx )

ts-node 在Node中可以借助此包来运行ts代码

pnpm install ts-node -g

. nodemon (是基于Node,开发过Node的同学应该知道这库，他是用与监听当前文件改动，并且重启服务，不用手动重启服务，可以提升开发效率)

pnpm install nodemon -g

在packge.json 配置

“scripts”: {
“dev” : “nodemon --watch lib / -e ts --exec ts-node ./lib/index.ts”,
},

parcel 打包支持浏览器运行TS 文件 (缺点，体积太大，有点，能够运行ts)

pnpm install parcel-bundler --save-dev

parcel-bundler 安装时可能会出现以下错误，直接忽略掉（跟网络有关，更换网络，或者是链接手机热点，这个包还是挺大的）
在这里插入图片描述

在根目录新建 index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
<script src="./index.ts"></script>
</html>

在packge.json 配置

“scripts”: {
“dev” : “nodemon --watch lib / -e ts --exec ts-node ./lib/index.ts”,
“navigator”: “parcel ./index.html”,
},

在这里插入图片描述

浏览器访问即可

在这里插入图片描述

关注

专栏目录