在 Visual Studio 代码中使用 typescript 和 webpack 调试 nodejs 项目的正确方法

Question

问题在主题的标题中有所描述。

文件结构：

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

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

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
  }
}

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'
  }
};

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

首先我启动 webpack，然后启动调试器。 毫无疑问，所有解决方案都因未知原因而无效:( Visual Studio Code 中的调试器不希望以任何方式工作。

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

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": "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"
  }
}

tsconfig.json：

{
  "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'
  }
};

Answer 1

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

你的起点

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

还有另一个道具输出文件

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

我不确定源映射是否适用于断点。如果没有，请不要在 webpack 中使用插件使用 devtool 属性...

devtool: 'source-map',