VS Code 调试完全攻略（6）：调试由 TypeScript 开发的 React

翻译：疯狂的技术宅

作者：Charles Szilagyi

来源：charlesagile

正文共：1808 字

预计阅读时间：7 分钟

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

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

基础知识（点击直达）
步进逐行调试（点击直达）
编辑变量并重新执行函数（点击直达）
launch.json 和调试控制台（点击直达）
基于浏览器的 React 应用（点击直达）
调试用 TypeScript 开发并打包的 React ?（? 本文）

获取代码

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

代码语言：javascript复制

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

代码

代码结构

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

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

你应该关注以下文件：

代码语言：javascript复制

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? （https://github.com/parcel-bundler/parcel）

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

启动服务器

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

代码语言：javascript复制

$ 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 文件的优势。实际上已经为你准备好了?

launch.json

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

代码语言：javascript复制

{
    "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 的状态栏中：