调试React + TypeScript + Webpack时无法在VSCode中设置断点

Question

问题：我正在尝试调试使用

构建的应用程序

VSCode 中的 React、TypeScript 和 Webpack，

但是断点没有被击中。

当我运行服务器并尝试在 vscode 中按 F5 进行调试时，

我得到一个未绑定的断点。这不起作用。

文件夹结构：

关键文件内容：

根/package.json：

{
  "name": "flight-spotter",
  "version": "1.0.0",
  "private": true,
  "license": "MIT",
  "author": {
    "name": "Jan Hartmann",
    "email": "[email protected]",
    "url": "https://janhartmann.dk"
  },
  "homepage": "https://github.com/janhartmann/flight-spotter",
  "scripts": {
    "install": "concurrently --prefix-colors magenta,blue -n server,client \"yarn server:install\" \"yarn client:install\"",
    "start": "gql-gen && concurrently --prefix-colors magenta,blue -n server,client \"yarn server:start\" \"yarn client:start\"",
    "build": "gql-gen && concurrently --prefix-colors magenta,blue -n server,client \"yarn server:build\" \"yarn client:build\"",
    "server:install": "cd server && yarn install",
    "server:build": "cd server && yarn build",
    "server:start": "cd server && yarn start",
    "client:install": "cd client && yarn install",
    "client:build": "cd client && yarn build",
    "client:start": "cd client && yarn start"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.2.0",
    "@graphql-codegen/fragment-matcher": "^1.2.0",
    "@graphql-codegen/typescript-compatibility": "^1.2.0",
    "@graphql-codegen/typescript-operations": "^1.2.0",
    "@graphql-codegen/typescript-react-apollo": "^1.2.0",
    "@graphql-codegen/typescript-resolvers": "^1.2.0",
    "concurrently": "^4.1.0",
    "graphql": "^14.3.0"
  }
}

根/tsconfig.json：

{
  "compilerOptions": {
    "rootDirs": ["client/src"],
    "outDir": "dist",
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es5",
    "jsx": "react",
    "lib": ["dom", "esnext"],
    "sourceMap": true,
    "noImplicitThis": true,
    "noImplicitAny": true
  },
  "exclude": ["node_modules", "dist"]
}

VSCode 启动.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/client",
            "sourceMaps": true
        }
    ]
}

Answer 1

我也面临同样的问题，我认为问题出在源映射上。我在一些帖子中看到将 launch.json 映射到输出目录（ dist ）