VSCode 调试器 - Node JS - Typescript - Webpack

Question

由于这个问题，我几乎把头发拉了出来。 我不能在我的项目中使用带有 VSCode 的调试器，我不明白为什么。

错误：

app\server.ts:1
import app from './app'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1070:16)
    at Module._compile (internal/modules/cjs/loader.js:1120:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47
Process exited with code 1

所以问题是我的源映射在捆绑代码之外的另一个文件夹中，它是这样的：

• server.js（捆绑）

• 应用程序

  • server.ts

  • app.ts

• 构建

  • 源地图

    • server.js.map（捆绑）

我的 launch.json ：

"configurations": [
    {
        "name": "Debug Program",
        "type": "node",
        "request": "launch",
        "program": "${workspaceFolder}/app/server.ts",
        "sourceMaps": true,
        "outFiles": [
            "${workspaceFolder}/build/sourcemaps/*"
        ],
        "skipFiles": [
            "<node_internals>/**"
        ]
    }
]

如果我使用捆绑的 server.js，调试器可以工作，但我的 ts 文件不能有断点（所以对我来说有点没用）。

还有我的其他文件：

webpack.config.js

module.exports = {
entry: './build/server/server.js',
mode: process.env.NODE_ENV,
target: 'node',
output: {
    path: path.resolve(__dirname),
    filename: 'server.js',
    sourceMapFilename: 'build/sourcemaps/server.js.map',
    devtoolModuleFilenameTemplate        : '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
},
module: {
    rules: [
        {
            test: /\.js$/,
            enforce: 'pre',
            include: [
                __dirname + './build',
            ],
            use: ['source-map-loader'],
        }
    ]
},
externals: [ nodeExternals() ],
devtool: 'source-map',
resolve: {
    extensions: ['.js']
},
stats: {
    warningsFilter: ['Failed to parse source map'],
},
}

server.ts：

import app from './app'
import { config } from 'dotenv'

/* ################################################
        Set Variables
################################################ */

config()
const port = process.env.SERVER_PORT

/* ################################################
        Listening
################################################ */

const listen : Promise<any> = new Promise ((resolve, reject) => {
    app.listen(port, () => {
        resolve(port)
    })
})

listen.then((port) => {
    console.log(`Console launched on http://localhost:${ port }`)
})

listen.catch((err) => {
    console.log(err)
})

app.ts：

import express from 'express'
import * as bodyParser from 'body-parser'
import { Routes } from './routes/routes'
import hbs from 'express-hbs'

class App {

    public app: express.Application
    public routePrv = new Routes()

    constructor () {
        this.app = express()
        this.config()
        this.setViewEngine()
        this.prepareStatic()
        this.mountRoutes()
    }

    /* ################################################
            Config
    ################################################ */

    private config(): void {
        this.app.use(bodyParser.json())
        this.app.use(bodyParser.urlencoded({ extended: false }))
    }
    
    /* ################################################
            Templating Engine
    ################################################ */
    
    private setViewEngine(): void {
        const viewDir = './app/views'

        this.app.engine('hbs', hbs.express4({
            partialsDir: viewDir + '/partials',
            layoutsDir: viewDir + '/layouts',
            extname: '.hbs'
        }))
        this.app.set('view engine', 'hbs')
        this.app.set('views', viewDir + '/pages')
    }

    /* ################################################
            Assets
    ################################################ */
    
    private prepareStatic(): void {
        this.app.use('/public', express.static('./build/assets'))
        this.app.use('/dist', express.static('./build/dist'))
    }

    /* ################################################
            Routes
    ################################################ */

    private mountRoutes(): void {
        this.routePrv.routes(this.app)
    }
}

export default new App().app

谢谢！！

Answer 1

我发现了问题

最后，问题出在sourcemap上，vscode没有考虑到，因为gulp任务配置不好……

在将我的 sourcemap 指向 server.ts 后，有了好的内容，一切正常。