无法启动 TypeScript 项目

Question

最近我改用 Gulp。经过一番挣扎，我终于成功地编译了我的项目。现在，我无法启动它，VS Code 告诉我：

无法启动程序'../src/bootstrap.ts'；设置“outFiles”属性可能会有所帮助。

当我使用 tsc 编译和运行应用程序时，一切正常。

这是我的配置文件：

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "preLaunchTask": "build",
            "sourceMaps": true,
            "program": "${workspaceRoot}/src/bootstrap.ts",
            "outFiles": ["${workspaceRoot}/lib/**/*.js"],
            "cwd": "${workspaceRoot}"
        }
    ]
}

tasks.json：

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "build",
            "isBuildCommand": true,
            "showOutput": "always",
            "problemMatcher": "$tsc"
        }
    ]
}

gulpfile.js：

var gulp = require('gulp')
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('copy', function () {
    var copyResult = gulp.src('src/templates/*.hbs')
        .pipe(gulp.dest('lib/templates/'));

    return copyResult;
});

gulp.task('compile', function () {
    var tsResult = gulp.src('src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts({
            module: "commonjs",
            target: "es6",
            noImplicitAny: false,
            typeRoots: ["node_modules/@types"],
            declaration: true,
            experimentalDecorators: true,
            emitDecoratorMetadata: true
        }));

    return tsResult.js
        .pipe(sourcemaps.write('.', { sourceRoot: function (file) { return file.cwd + '/lib'; } }))
        .pipe(gulp.dest('lib'));
});

gulp.task('build', ['copy', 'compile']);

这里是项目文件夹结构：

- lib (compiled output)
    - api
    - engine

- src
    - api
    - engine
    - bootstrap.ts

- gulpfile.js
- tsconfig.json

所以我找不到 outFiles 设置有什么问题。

编辑 好的，我想我已经找到了发生了什么。

这是tsc生成的js.map文件（映射属性省略）：

{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../src/bootstrap.ts"],"names":[]}

这是 gulp 生成的 js.map 文件（映射和 sourceContent 省略）：

{"version":3,"sources":["bootstrap.ts"],"names":[]}

不同之处在于 sources 属性中明显没有相对文件夹路径。所以当我用 gulp 编译时，VSCode 找不到 .ts 文件。所以我想我必须找到一种方法来编译所有文件，就像 tsc 使用 gulp 一样。

Answer 1

好的！

在 sourcemaps.write() 解决问题之前添加下面的代码。

.pipe(sourcemaps.mapSources(function (sourcePath, file) {
    // source paths are prefixed with '../src/'
    return '../src/' + sourcePath;
}))