VS Code 调试完全攻略（6）：调试用 TypeScript 开发并打包的 React ??

本文主要是介绍VS Code 调试完全攻略（6）：调试用 TypeScript 开发并打包的 React ??，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

作者：Charles Szilagyi

翻译：疯狂的技术宅

原文：https://charlesagile.com/debu...

未经允许严禁转载

说到前端，我现在选择的武器是 React、TypeScript 和 Parcel trinity。这是一个简单、可靠而且高效的设置，只需最少的配置。本文将向你展示如何在 VS Code 中创建匹配的调试器。

VS Code 调试完全攻略系列目录

1. 基础知识
2. 步进逐行调试
3. 编辑变量并重新执行函数
4. launch.json 和调试控制台
5. 基于浏览器的 React 应用
6. 调试用 TypeScript 开发并打包的 React 📦

获取代码

如果你已经有了 React、TypeScript 和 Parcel 项目，则可以跳过本节。如果没有就下载示例代码：

git clone git@github.com:thekarel/debug-anything.git
cd debug-anything/parcel
yarn # or npm i

代码结构

这是一个简单的应用程序：你将看到博客文章标题的列表，单击标题将会获取该文章的正文，并将其显示在列表上方。

像往常一样，这个文件夹中的代码保持尽可能的简单，以便使我们把注意力集中在调试器上。在用于生产的应用程序中，我们将会使用人性化的文件夹结构。入口是 index.html，它引入 index.tsx 并运行基本的 React 程序。

你应该关注以下文件：

Post.ts # The Post interface type
Posts.tsx # The post-list React component
index.html # The entry-point
index.tsx # The React app
postRepository.ts # Data fetching module

总共不到 100 行，所以不要指望有什么实质性的内容😉

Parcel

你可能想知道 Webpack 或 Babel 配置文件在哪里。好吧，没有！由于 Parcel 是一个零配置的打包程序，因此我们可以直接告诉它去编译代码，并且始终有效。我发现它比 Create React App 之类的其他解决方案更简单、快速。

在这个例子中，可以通过简单地将 Parcel 指向 index.html 来打包用 TypeScript 编写的整个 React 程序，这就是我们所要做的，无需为太多的事操心。值得你把一颗星星⭐️送给它 GitHub👍

注意：示例代码用的是 Parcel 2 alpha3。

启动服务器

用 yarn start 或 npm start 启动服务器：

$ yarn start
yarn run v1.22.4
$ parcel index.html
ℹ️ Server running at http://localhost:1234
✨ Built in 548ms

确保你可以访问 http://localhost:1234

程序在启动时获取文章列表，然后在单击标题时从服务器获取所选文章的正文。

配置调试器

我们希望在调试时能够在 VS Code 中设置断点、启动调试浏览器、以及逐步调试获取初始列表和后续的远程请求。

为了使它尽可能简单和好用，我们将利用 launch.json 文件的优势。实际上已经为你准备好了😌

让我们打开 .vscode/launch.json 并关注 React + TS 和 Parcel 部分：

{
    "type": "chrome",
    "request": "launch",
    "name": "Debug React, TS, Parcel app in Chrome",
    "url": "http://localhost:1234/",
    "webRoot": "${workspaceFolder}/parcel",
    "pathMapping": {
        "__parcel_source_root": "${workspaceFolder}/parcel"
    },
        "skipFiles": [
        "${workspaceFolder}/parcel/node_modules/**/*.js",
        "<node_internals>/**/*.js"
    ]
},

顺便说一下，该配置与我们的 Create React App 示例非常相似。

type 和 request 参数告诉 VS Code 在新的 Chrome 窗口中开始调试。

第一次运行后，启动器的 name 将显示在调试工具栏和 IDE 的状态栏中：

url 需要与我们的 dev 版本的地址匹配（默认为 http://localhost:1234/）。

webRoot：与开发服务器根目录匹配的文件系统路径。通常是入口点所在的文件夹。在我们的例子中是 index.html 所在的文件夹。要注意，示例代码库中包含多个小项目。在单项目仓库中，"webRoot": "${workspaceFolder}/src" 是一个要想到的路径。

pathMapping：在当前项目的情况下，此选项是必需的，因为 Parcel 提供了一个源映射，使原始文件看起来像在 /__ parcel_source_root 下。没有这个设置，VS Code 会无法将源中的断点位置映射到运行时代码：

如果遇到 "Breakpoint set but not yet bound" 问题，请检查你的 pathMapping

你可以在调试浏览器中找到正确的路径。在 Chrome 中，打开开发者控制台，然后转到“Sources”：

最后，我们设置 skipFiles，使调试器永远不会 Step Into 第三方或核心 Node.js 模块。如果你想专注于自己的代码并且对花时间看库代码不感兴趣，那么跳过此类文件非常有用，强烈建议你进行调整。

使用 React + TypeScript 调试器

确保 dev 服务器正在运行，然后启动调试浏览器：

添加两个断点：一个在 fetchBody 函数内部，另一个在 useEffect hook 中：

现在，我们可以重新启动调试器（而不是服务器！），并在首次安装组件时检查 hook 的行为：

接下来，我们可以遵循 fetchBody 的代码流程——注意我们是如何永远都看不到任何核心库或第三方库的（例如 Fetch 或 React 内部）：

希望你能够基于这个模板在 React/TypeScript 应用中实现舒适的调试工作流程✌️

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

• 深入理解Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13个帮你提高开发效率的现代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
• WebSocket实战：在 Node 和 React 之间进行实时通信
• 关于 Git 的 20 个面试题
• 深入解析 Node.js 的 console.log
• Node.js 究竟是什么？
• 30分钟用Node.js构建一个API服务器
• Javascript的对象拷贝
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程完全指南
• 把HTML转成PDF的4个方案及实现

---

• 更多文章...

这篇关于VS Code 调试完全攻略（6）：调试用 TypeScript 开发并打包的 React ??的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！