Node.js 在VisualStudio代码中使用typescript和webpack调试nodejs项目的正确方法

该主题的标题中描述了该问题

文件结构：

-source
   -app
      -tools
         Cache.ts
         Logger.ts
      databases.ts
      filesystem.ts
      library.ts
      runtime.ts
   -config
      filesystem.ts
      service.ts
   service.ts

编译文件：

-bin
   service.bundle.js
   service.bundle.js.map

package.json：

{
  "name": "service",
  "scripts": {
    "start": "node bin/service.bundle",
    "dev": "webpack --watch",
    "debug-build": "tsc"
  },
  "private": true,
  "devDependencies": {
    "eslint": "^5.13.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^4.0.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier": "^1.16.4",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "@types/mkdirp": "^0.5.2",
    "@types/node": "^11.9.3",
    "mkdirp": "^0.5.1"
  }
}

{
  "name": "service",
  "scripts": {
    "start": "node bin/service.bundle",
    "dev": "webpack --watch",
    "debug-build": "tsc"
  },
  "private": true,
  "devDependencies": {
    "eslint": "^5.13.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^4.0.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier": "^1.16.4",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "@types/mkdirp": "^0.5.2",
    "@types/node": "^11.9.3",
    "mkdirp": "^0.5.1"
  }
}

tasks.json：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Webpack watch",
      "type": "npm",
      "script": "dev"
    },
    {
      "label": "Webpack build",
      "type": "npm",
      "script": "build"
    },
    {
      "label": "Debug",
      "type": "npm",
      "script": "start"
    }
  ]
}

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Webpack watch",
      "type": "npm",
      "script": "dev"
    },
    {
      "label": "Build",
      "type": "npm",
      "script": "debug-build"
    }
  ]
}

launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",

      "stopOnEntry": false,
      "args": [],
      "cwd": "${workspaceFolder}",
      "preLaunchTask": null,
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "start"],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal",
      "port": 9229
    }
  ]
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "rootDir": "./source",
    "removeComments": true,
    "downlevelIteration": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./debug",
    "rootDir": "./source",
    "removeComments": true,
    "downlevelIteration": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

webpack.config.js：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: ['./source/service.ts'],
  target: 'node',
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  mode: 'development',
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: 'service.bundle.js.map'
    })
  ],
  output: {
    path: path.join(__dirname, 'bin'),
    filename: 'service.bundle.js'
  }
};

我花了很多时间寻找一个很好的解决方案，使用typescript和webpack在NodeJ上调试项目，并将其编译成一个文件

首先启动网页包，然后启动调试器。 由于未知原因，所有的解决方案都无法工作：( VisualStudio代码中的Debbuger不希望以任何方式工作

[已解决] 使用以下配置调试项目：

launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/source/service.ts",
      "outFiles": ["${workspaceFolder}/debug/**/*.js"],
      "preLaunchTask": "Build",
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal"
    }
  ]
}

tasks.json：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Webpack watch",
      "type": "npm",
      "script": "dev"
    },
    {
      "label": "Webpack build",
      "type": "npm",
      "script": "build"
    },
    {
      "label": "Debug",
      "type": "npm",
      "script": "start"
    }
  ]
}

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Webpack watch",
      "type": "npm",
      "script": "dev"
    },
    {
      "label": "Build",
      "type": "npm",
      "script": "debug-build"
    }
  ]
}

package.json：

{
  "name": "service",
  "scripts": {
    "start": "node bin/service.bundle",
    "dev": "webpack --watch",
    "debug-build": "tsc"
  },
  "private": true,
  "devDependencies": {
    "eslint": "^5.13.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^4.0.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier": "^1.16.4",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "@types/mkdirp": "^0.5.2",
    "@types/node": "^11.9.3",
    "mkdirp": "^0.5.1"
  }
}

{
  "name": "service",
  "scripts": {
    "start": "node bin/service.bundle",
    "dev": "webpack --watch",
    "debug-build": "tsc"
  },
  "private": true,
  "devDependencies": {
    "eslint": "^5.13.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^4.0.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier": "^1.16.4",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "@types/mkdirp": "^0.5.2",
    "@types/node": "^11.9.3",
    "mkdirp": "^0.5.1"
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "rootDir": "./source",
    "removeComments": true,
    "downlevelIteration": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./debug",
    "rootDir": "./source",
    "removeComments": true,
    "downlevelIteration": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: ['./source/service.ts'],
  target: 'node',
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  mode: 'development',
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    path: path.join(__dirname, 'bin'),
    filename: 'service.bundle.js'
  }
};

---

您需要将程序属性添加到launch.json中

你的出发点

 "program": "${workspaceFolder}/source/service.ts",

还有另一个道具

"outFiles": [
    "${workspaceFolder}/bin/**/*.js"
  ]

我不确定源地图是否适用于Breakepoint。如果不适用，请不要在网页包中使用插件和devtool道具

devtool: 'source-map',

---

好的，现在visual studio代码启动应用程序成功了，但debbuger仍然无法运行。对于

“程序”：“${workspaceFolder}/source/service.ts”，

无法运行，我将此字符串更改为

“程序”：“${workspaceFolder}/bin/service.bundle.js”

您是否在launch.json中设置了outFiles？对于调试，您必须设置“程序”：${workspaceFolder}/source/service.ts“…必须设置ts文件。您想调试ts文件而不是js…最后一件事可能是。设置“outDir”：“/bin”在tsconfig、jsonoh yes和REMOVE PORT from launch.jsonNow中，我有一个错误：

无法启动程序'/homo/user/Documents/Projects/projectname/source/service.ts'，因为找不到相应的JavaScript。
sooo…当我删除
“runtimeExecutable”：“npm”，“runtimeArgs”：[“run script”，“start”]，“stopOnEntry”：false，“args”：，“cwd”：“${workspaceFolder}”，
并将
“preLaunchTask”：null，
更改为
“preLaunchTask”：“Webpack build”，
然后我更改tasks.json
{“label”：“Webpack build”，“type”：“npm”，“script”：“build”}，
更改为
{“label”：“Webpack build”，“type”：“npm”，“script”：”调试生成“}，