时间戳

首页 > 解决方案 > 使用 VScode 在 React 项目中调试独立的 Typescript 文件

reactjs - 使用 VScode 在 React 项目中调试独立的 Typescript 文件

问题描述

我有一个使用create react app创建的 React 项目。有时我想在单独的文件中使用打字稿代码并对其进行调试。

VSCode 需要在调试配置中设置生成的 .js 文件夹，否则会出现以下信息。

Cannot launch program 'File.ts' setting the 'outFiles' attribute might help.

或者如果设置为“outFiles”：[“${fileDirname}/*.js”]：

Cannot launch program 'File.ts' because corresponding JavaScript cannot be found.

我找不到项目在哪里生成 .js 文件。似乎创建反应应用程序使用 webpack，它应该使用ts-loader。它会生成一个 bundle.js 文件，但我什至在工作区文件夹中也找不到它。

作为参考，我的完整launch.json。任何帮助表示赞赏。谢谢！

{
   "version": "0.2.0",
   "configurations": [   
      // Not working  
      {
         "type": "node",
         "request": "launch",
         "name": "Debug File",
         "program": "${file}",
         "outFiles": ["${fileDirname}/*.js"]
      },
      {
         "type": "node",
         "name": "Run tests",
         "request": "launch",
         "args": [
            "test",
            "--runInBand"
         ],
         "cwd": "${workspaceFolder}",
         "console": "integratedTerminal",
         "internalConsoleOptions": "neverOpen",
         "disableOptimisticBPs": true,
         "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-scripts",
         "protocol": "inspector"
      },
      {
         "name": "Chrome",
         "type": "chrome",
         "request": "launch",
         "url": "http://localhost:3000",
         "webRoot": "${workspaceRoot}/src"
     }
   ]
}

标签： reactjstypescriptvisual-studio-codecreate-react-app

解决方案

您可以将项目构建为 .ts 项目并支持旧版 js 文件，也可以包含 typescript 文件输出文件夹，以便将 .ts 编译为 .js，并且 .js 模块将包含在您的 React 应用程序中。但是你不能仅仅在一个 js 项目中放置一个 ts 文件并期望 React 为你建立这个连接。

为了让您的工作空间井井有条，我建议将 ts 移动到一个单独的文件夹，将该文件夹作为 ts 项目初始化，并将其作为库包含在您的 React 项目中（即使它是单个文件）

然后，您可以使用 和 等测试框架mocha + chai对其jest进行测试。mocha 和 jest 都可以直接测试你的 .ts 而不需要你编译它（他们正在为你做这件事，使用包如jest-ts）

Lerna或者Yarn workspaces可以帮助链接，并且可以轻松配置 vs-code 以支持工作区中的多个项目（包）。包括用于测试。

推荐阅读