• 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”,
    },

    1. nodemon --watch lib/ 表示监听 packge.json 同级目录lib
    2. -e ts 表示 nodemon 命令准备监听的是ts 后缀的文件
    3. –exec ts-node ./lib/index.ts 表示检测到 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”,
    },

    在这里插入图片描述

    浏览器访问即可

    在这里插入图片描述

  • 相关阅读:
    智能名片是如何帮助企业实现从“0”到“1”的流量闭环的？
    LTSPICE使用教程：二极管钳位电路仿真
    2022 Java 企业面试题汇总
    Zookeeper集群 + Kafka集群
    云课五分钟-04一段代码学习-大模型分析C++
    Day6 --- SQLAlchemy进阶
    技术分享 | 代码覆盖率集成
    Layer2 和 ETH2.0 关系
    对象序列化浅析
    学生静态HTML个人博客主页【Web大学生网页作业成品】HTML+CSS+JavaScript
  • 原文地址：https://blog.csdn.net/qq_39970857/article/details/126562585