Reactjs 使用VScode调试React项目中的独立Typescript文件

我使用创建了一个React项目。有时我想在一个单独的文件中使用typescript代码并调试它

VSCode要求在调试配置中设置生成的.js文件夹，否则将显示以下消息

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

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

我找不到项目生成.js文件的位置。似乎CreateReact应用程序使用了webpack，应该使用它。它生成了一个bundle.js文件，但我甚至在workspace文件夹中也找不到它

我的完整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"
     }
   ]
}

---

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

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

然后，您可以使用测试框架，如

mocha+chai

和

jest

来测试它。mocha和jest都可以直接测试你的.ts，而不需要你编译它（他们使用诸如

jest-ts

之类的包为你做这件事）

---

Lerna

或

warn工作区

可以帮助链接，并且可以轻松配置vs代码以支持工作区中的多个项目（包）。包括测试

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

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

然后，您可以使用测试框架，如

mocha+chai

和

jest

来测试它。mocha和jest都可以直接测试你的.ts，而不需要你编译它（他们使用诸如

jest-ts

之类的包为你做这件事）

---

Lerna

或

warn工作区

可以帮助链接，并且可以轻松配置vs代码以支持工作区中的多个项目（包）。包括测试

你有一个Typescript.json文件吗？如果它是一个与node单独启动的“独立”ts文件，CRA/webpack构建究竟扮演什么角色？前者是节点调试，后者是客户端调试。这是由create react应用程序自动创建的：。关于Webpack，我猜它是直接从我的源文件夹加载typescript文件，而不是让ts编译器编译它们然后加载。这增加了热重新加载功能。您是否有Typescript.json文件？如果它是与node单独启动的“独立”ts文件，CRA/webpack构建将扮演什么角色？前者是节点调试，后者是客户端调试。这是由create react应用程序自动创建的：。关于Webpack，我猜它是直接从我的源文件夹加载typescript文件，而不是让ts编译器编译它们然后加载。这增加了热加载功能。如果我原来的问题不清楚，很抱歉。我已使用带有typescript模板（）的react应用程序创建。我所有的源代码都是typescript，但是我不知道如何运行一个文件。如果我最初的问题不清楚，很抱歉。我已使用带有typescript模板（）的react应用程序创建。我所有的源代码都是typescript，但我不知道如何运行单个文件。

{
   "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"
     }
   ]
}