Отладка Node.js с Typescript использование Webpack в VSCode невозможно, пожалуйста, дайте несколько советов

#node.js #typescript #debugging #webpack #visual-studio-code

#node.js #typescript #отладка #webpack #visual-studio-code

Вопрос:

Я трачу почти 6 часов, пытаясь заставить это работать, но, похоже, он отказывается всеми способами. Я создал простой API с NodeJS, используя Typescript и Webpack, но когда я попытался отладить его, поставил точки останова и все такое, VSCode поставил это очень сложно.

Запустите файл .json :

    "version": "0.2.0",
   "configurations": [
       {
           "type": "node",
           "request": "launch",
           "name": "Launch Program",
           "preLaunchTask": "npm: start - server",
           "skipFiles": [
               "<node_internals>/**"
           ],
           "program": "${workspaceFolder}\server\webpack.config.ts",
           "outFiles": [
               "${workspaceFolder}/server/dist/index.js"
           ],
           "sourceMaps": true,
           "trace": true
       }
   ]
}
  

webpack.config.ts :

 
const webpack = require("webpack");
const path = require("path");
const nodeExternals = require("webpack-node-externals");

module.exports = {
  entry: ["./src/index.ts"],
  devtool: "source-map",
  watch: true,
  target: "node",
  externals: [
    nodeExternals({
      allowlist: ["webpack/hot/poll?100"]
    })
  ],
  module: {
    rules: [
      {
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  mode: "development",
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.js"
  }
}; 
  

index.ts моего приложения, которое использует промежуточное программное обеспечение с маршрутизаторами для перенаправления запросов URL.

     import express from "express";
    import cors from "cors";
    import helmet from "helmet";
    import { categoryRouter } from "./routers/category.router";
    import { CategoryPostgre } from "./database/postgre/category.postgre";

    dotenv.config();

/**
 * App Variables
 */

    if (!process.env.PORT) {
        process.exit(1);
    }
    
    const PORT: number = parseInt(process.env.PORT as string, 10);
    
    const app = express();
    const router = express.Router();

/**
 *  App Configuration
 */

    app.use(helmet());
    app.use(cors());
    app.use(express.json());

    /**
    *  Service Initialization
    */
    console.log(`Inicializando Servicios`);

    app.use('/api/category', categoryRouter);


/**
 * Server Activation
 */
       
    const server = app.listen(PORT, () => {
        console.log(`----------------------------------------------------------------`);
        console.log(`--- App V 0.1 NodeJS Server Listening on port ${PORT} ---`);
        console.log(`----------------------------------------------------------------`);
  

tsconfig.json :

 {
  "compilerOptions": {

    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */                         /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true,  /* Disallow inconsistently-cased references to the same file. */
  }
}


  

Я хочу, чтобы только отладчик продолжал прослушивать точки останова, поэтому, когда я запускаю запрос с помощью postman, он останавливается на моей функции categoryRouter, и я вижу, что происходит прямо там.

Теперь он просто ничего не делает, когда я его запускаю.

введите описание изображения здесь

Ответ №1:

Насколько я знаю, существует 2 типа запросов при настройке launch.json :

  • launch : который сам запустит новый сервер.
  • attach : который сообщает vscode, когда вы нажимаете кнопку start debug, чтобы присоединить debbuger к существующему запущенному процессу.

Первый вариант в основном используется, когда вы хотите отключить скрипт в том смысле, что он может запускаться сам по себе и не ожидает внешнего ввода.

Второй можно использовать, если ваш сервер уже запущен на любом указанном вами порту.

Попробуйте следующее: package.json :

 {
   "scripts": {
      "build": "webpack",
      "start": "nodemon --inspect=0.0.0.0:9229 lib/index.js",
      ...
   }
}
  

Примечание lib/index.js это мой скомпилированный файл, так как я использую ts в своем проекте.
--inspect=...:9229 сообщает работающему серверу прослушивать клиентское соединение (отладчик) на указанном порту.
если ваш сервер работает внутри docker, оставьте адрес хоста равным: 0.0.0.0 но если вы его не используете, установите его равным: 127.0.0.1

Затем вам нужно настроить свой .vscode/launch.json так, чтобы он мог подключаться к серверу. это конфигурация, которую я использую:

 {
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Docker: Attach to Node",
            "type": "node",
            "request": "attach",
            "restart": true,
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/application",
            "protocol": "inspector"
        }
    ]
}
  

Обратите /application WORKDIR внимание, что я определил в моем Dockerfile
, если вы не используете docker, вам, вероятно, не нужно это свойство.

При такой настройке у меня может быть docker, работающий на моем сервере, и в любой момент, когда мне нужно отладить конечную точку на моем сервере, я могу просто запустить отладчик из vscode и добавить точку останова в свой исходный код, затем из postman, когда я запускаю запрос, vscode приостанавливает выполнение наточка разрыва.

Удачи, надеюсь, это поможет. 🙂