Typescript本地浏览器调试

众所周知浏览器是不能直接跑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>
1
2
3
4
5
6
7
8
9
10

在packge.json 配置

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

在这里插入图片描述

浏览器访问即可

在这里插入图片描述

相关阅读:
spring 用户通过交互界面登录成功事件源码分析
2021 ICPC 澳门站G Cyclic Buffer （特殊的状压dp）
【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇嵌入式Linux入门篇-第二十八章借助U盘或TF卡拷贝程序到开发板上
移动端安全区域适配方案
前端自定义导出PPT
Servlet学习笔记
A、B机器正常TCP连接后，B突然断网，A处于什么状态？
机器学习Sklearn的k近邻算法api初步使用
Vulnstack----5、ATT&CK红队评估实战靶场五
go 递归数据多层级横向展开插入数据库

原文地址：https://blog.csdn.net/qq_39970857/article/details/126562585