在Visual Studio代碼中使用TypeScript和Webpack調試Node.js項目的正確方法

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

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

我花了很多時間尋找一個好的解決方案，用於使用typescript和webpack編譯成一個文件在nodejs上調試項目。

首先，我啟動webpack，然后啟動調試器。 絕對所有的解決方案都因未知原因而無法使用：（Visual Studio Code中的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"
    }
  ]
}

task.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中使用plugin use devtool prop ...

devtool: 'source-map',