VSCode 调试 Typescript 应用

Question

我有一个用 TypeScript 编写的应用程序，它使用 import 语句。我已按照说明 here 在 VSCode 中启用调试。 VSCode 构建命令在 out-tsc 中创建输出 .js 和 .map 文件。但是，当我尝试调试时，出现以下错误：

Debugger attached.
/Users/integrityinspired/Documents/Dev/basilisk-island/dist/out-tsc/server/src/app.js:1
(function (exports, require, module, __filename, __dirname) { import { initQueues } from '../../shared/firebase-app';
                                                            ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Timeout.Module.runMain [as _onTimeout] (module.js:590:10)
    at tryOnTimeout (timers.js:232:11)
    at Timer.listOnTimeout (timers.js:202:5)
Waiting for the debugger to disconnect... 

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-w", "-p", "."],
    "showOutput": "silent",
    "isWatching": true,
    "problemMatcher": "$tsc-watch"
}

需要注意的是，类型的导入是从js中去掉的，是函数的导入失败了。

app.ts

import { HandlerDef } from '../../shared/handler/handler-def';
import { initQueues } from '../../shared/firebase-app';

const handlers: HandlerDef[] = [
];
initQueues('app', handlers);

app.js（由VSCode编译）

import { initQueues } from '../../shared/firebase-app';
const handlers = [];
initQueues('app', handlers);
//# sourceMappingURL=/Users/integrityinspired/Documents/Dev/basilisk-island/server/src/app.js.map

firebase-app.ts

import * as firebase from 'firebase';
import * as Queue from 'firebase-queue';
import { HandlerDef } from './handler/handler-def';
import { createQueue } from './queue-wrapper';

export function initQueues(queue: string, handlers: HandlerDef[]): void {
    const config = firebaseConfig();
    firebase.initializeApp(config);
    let envSuffix: string = '';
    if (process.env.NODE_ENV === 'development') {
        console.log('Running in dev mode');
        envSuffix = '-dev';
    }
    const ref = firebase.database().ref(`/queue${envSuffix}/${queue}`);
    handlers.forEach(def => {
        createQueue(ref, def);
    });
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es6",
      "dom"
    ],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "dist/out-tsc",
    "sourceMap": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "client",
    "node_modules",
    "public",
    "typings/browser",
    "typings/browser.d.ts"
  ]
}

launch.json:

{
    // Use IntelliSense to find out which attributes exist for node debugging
    // Use hover for the description of the existing attributes
    // For further information visit https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Server",
            "type": "node2",
            "request": "launch",
            "program": "${workspaceRoot}/dist/out-tsc/server/src/app.js",
            "cwd": "${workspaceRoot}",
            "env": {
                "NODE_ENV": "development"
            },
            "outFiles": [],
            "sourceMaps": true
        },
        {
            "name": "Attach to Process",
            "type": "node2",
            "request": "attach",
            "port": 9229,
            "outFiles": [],
            "sourceMaps": true
        }
    ]
}

Answer 1

在tsconfig.json 中，我需要将"module": "es6", 更改为"module": "commonjs"。