VSC 调试器抛出 SyntaxError：无法在模块外使用 import 语句答案

【问题标题】：VSC Debugger throwing SyntaxError: Cannot use import statement outside a moduleVSC 调试器抛出 SyntaxError：无法在模块外使用 import 语句
【发布时间】：2020-09-02 01:47:37
【问题描述】：

在最近更新 Visual Studio Code 之前，我能够使用 launch.json 配置调试我用 TypeScript 编写的 Node.js 应用程序

{
    // 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": "node",
            "request": "launch",
            "name": "Debug API",
            "protocol": "inspector",
            "program": "${workspaceFolder}/apps/api/src/main.ts",
            "outFiles": ["${workspaceFolder}/dist/apps/api/main.js"],
            "sourceMaps": true
        }
    ]
}

但现在我遇到了这个错误

import * as express from 'express';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
Process exited with code 1

知道如何解决这个问题吗？或者至少在 VSC 团队在他们的 GitHub https://github.com/microsoft/vscode/issues/102834 上提供答案时让它工作。

【问题讨论】：

目前正是我的问题，我可以使用简单的命令npx ts-node src/ 运行该应用程序，但是当我在 vscode 启动中运行时会出现此错误。这里有更新吗？

标签： visual-studio-code vscode-debugger

【解决方案1】：

根据a comment on this github issue，VSC 团队已为 Visual Studio Code 1.48 版提供了修复：

{
    "type": "node",
    "request": "launch",
    "name": "Debug launcher",
    "protocol": "inspector",
    "program": "${workspaceFolder}/apps/launcher/src/main.ts",
    "outFiles": ["${workspaceFolder}/dist/**/*.js"],
    "sourceMaps": true
}

【讨论】：

【解决方案2】：

您可以执行以下操作：

在package.json 中添加（如果不存在）构建步骤，类似这样；
```
"ci-build": "npx tsc",
```

我在tsconfig.json中有以下选项；

"compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "module": "commonjs"
    "sourceMap": true,
    "lib": ["esnext", "dom"],
    "strict": true,
    "esModuleInterop": true,
    "target": "es2017"
}

注意：确保将sourceMap设置为true

我的launch.json 看起来像这样；

{
    "type": "node",
    "request": "launch",
    "name": "Build Project",
    "program": "${workspaceFolder}/src/index.ts",
    "preLaunchTask": "npm: ci-build",
    "sourceMaps": true,
    "smartStep": true,
    "internalConsoleOptions": "openOnSessionStart",
    "outFiles": ["${workspaceFolder}/dist/**/*.js"]
}

如需进一步阅读，请参阅my blog post on the topic

【讨论】：

对我来说最重要的是在tsconfig.json 中设置sourceMap: true，太棒了！