gulp-typescript with gulp-sourcemap: 将文件输出到同一目录

Question

我正在使用 gulp-typescript 和 gulp-sourcemaps 来使用源映射编译 TypeScript。我想将 .js 和源映射文件都输出到与原始 .ts 文件相同的目录。

我正在使用 tsconfig.json 文件来配置 TypeScript，并且我正在使用 typings 来管理 TypeScript 定义文件。我自己的所有代码都在 js 目录中。这是我的项目结构：

project root
|-- js/
|   |-- subdir/
|   |   |-- someScript.ts
|   |-- app.ts
|-- typings/
|   |-- someDefinitionFile.d.ts
|-- gulpfile.js
|-- tsconfig.json

现在我希望 app.js 出现在 js 目录中，someScript.js 出现在 js/subdir 中。另外，在 Chrome 中调试时，我想在 'Sources' 选项卡中保持相同的文件夹结构。

我为此配置了以下 gulp 任务：

var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
var sourcemaps = require('gulp-sourcemaps');

gulp.task("ts", function () {
    var tsResult = tsProject
      .src()
      .pipe(sourcemaps.init())
      .pipe(ts(tsProject)).js
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("js"));
});

这有效地将 .js 文件输出到正确的目录中。但是，当运行在 Chrome 中打开开发工具时，.ts 文件位于根目录下的 'source' 目录中，这意味着源映射文件包含不正确的根目录.

要在同一位置显示 .ts 文件和 .js 文件，应该更改什么？

注：此题与类似，只是我要用tsconfig.json，所以不能用gulp.src或其base属性.

Answer 1

只需设置 gulp-sourcemap 写入选项的 sourceRoot 属性。此任务有效：

gulp.task("ts", function () {
    tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject)).js
        .pipe(sourcemaps.write({sourceRoot: "/js"}))
        .pipe(gulp.dest("js"));
});

gulp-typescript with gulp-sourcemap: 将文件输出到同一目录

gulp-typescript with gulp-sourcemap: output files to same directory

typescript

gulp

gulp-sourcemaps

gulp-typescript