在Visual Studio代码中使用TypeScript和Webpack调试Node.js项目的正确方法

Question

The problem is described in the title of the topic.

File structure:

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

Compiled files:

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

I spent a lot of time looking for a good solution for debugging projects on nodejs using typescript and webpack with compiling into one file.

First I launch the webpack, then I launch the debugger. Absolutely all the solutions turned out to be inoperative for an unknown reason :( Debbuger in Visual Studio Code does not want to work in any way.

[SOLVED] Use this configurations for debugging project:

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

You need to add program property in to your launch.json

Your start point

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

and another prop outfiles

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

i am not sure if source maps will work for breakepoints. if not, dont use plugin use devtool prop in webpack...

devtool: 'source-map',