在节点应用程序中遇到断点时如何使VSCode打开“src”的原始TS文件

Question

我有一个 CLI 节点应用程序，我正在尝试使用 VSCode 进行调试。 它工作得很好，但是当遇到断点时，VSCode 从源 map 文件而不是位于我的“src”文件夹中的实际 TS 文件打开一个新的代码视图。 这有点烦人。 当我使用 VSCode 作为调试器在浏览器中运行一些 JS 代码时，VSCode 会按预期打开实际的 TS 文件。 我如何通过节点获得这种行为？

launch.json ：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Node",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/bin/js/index.js",
            "console": "integratedTerminal",
            "cwd": "${workspaceFolder}/bin/js",
            "args": [
                "authorize"
            ]
        }
    ]
}

tsconfig.json ：

{
    "compilerOptions": {
        "baseUrl": "./src",
        "moduleResolution": "node",
        "module": "ES2020",
        "target": "ES2018",
        "allowSyntheticDefaultImports": true,
        "jsx": "react",
        "strict": true,
        "strictPropertyInitialization": true,
        "noEmitOnError": true,
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outDir": "./bin",
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

webpack.config.json ：

const path = require("path");
const webpack = require("webpack");
const { merge } = require('webpack-merge');

const commonConfig = {
    target: 'node',
    entry: "./src/Startup.ts",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [{
                    loader: "ts-loader"
                }]
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
        modules: ["./src", "node_modules"]
    },
    output: {
        path: path.resolve(__dirname, "./bin/js/"),
        filename: "index.js",
    },
    plugins: [
        new webpack.DefinePlugin({ "global.GENTLY": false })
    ],
    externals: {
        'cliui': 'commonjs2 cliui',
        'y18n': 'commonjs2 y18n',
        'yargs-parser': 'commonjs2 yargs-parser',
    }
}

const developmentConfig = {
    mode: 'development',
    devtool: 'source-map',
    stats: {
        warnings: false
    }
}

const productionConfig = {
    mode: 'production'
}

module.exports = (env, argv) => {
    switch(argv.mode) {
      case 'development':
        return merge(commonConfig, developmentConfig);
      case 'production':
        return merge(commonConfig, productionConfig);
      default:
        throw new Error(`Configuration '${argv.mode}' does not exists.`);
    }
}

Answer 1

源map文件中Webpack生成的TS文件路径使用的是VSCode不理解的webpack协议。 我通过在我的webpack.config.js中添加这个参数来解决它，所以源 map 包含 TypeScript 文件的绝对路径：

const commonConfig = {
    output: {
        devtoolModuleFilenameTemplate: "[absolute-resource-path]",
    },
}