typescript - 有没有办法在一次编译任务中使用 gulp-typescript 生成映射文件和声明文件？

Question

我正在使用 gulp-typescript将我的 TypeScript 代码转换为 JavaScript。本质上，我想要一个 *.ts 文件，因为有相应的 *.js, *.d.ts 和 *.map 文件生成。

在编译任务中，我注意到我只能用声明或用映射转译，但不能同时转译。例如，有 1 个编译任务试图像下面这样生成声明 + 映射文件(使用 JavaScript 文件)是行不通的。以下将生成 JavaScript + 映射文件，但不会生成声明文件。

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

gulp.task('compile', function () {
  var tsProject = tsc.createProject('tsconfig.json');
  var tsResult = gulp.src(['src/**/*.ts'])
    .pipe(sourcemaps.init())
    .pipe(tsProject());
  return tsResult.js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/src'));
});

我的 tsconfig.json 如下所示。

{
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es6",
        "module": "commonjs",
        "alwaysStrict": true,
        "diagnostics": false,
        "listEmittedFiles": false,
        "listFiles": false,
        "pretty": true,
        "declaration": true
    }
}

为了解决这个问题，现在，我必须创建 3 个 gulp 任务:

• 一个创建声明，
• 一个创建映射，和
• 一个拜访前两个。

此选项有效，但不是理想的做法，也不是最佳实践，因为现在我必须编译两次才能获得所需的输出。

我的 3 gulp 任务如下所示。请注意我现在是如何使 tsProject 成为函数的局部变量(保持全局，gulp 任务失败)。

gulp.task('compile:with:dts', function () {
  var tsProject = tsc.createProject('tsconfig.json');
  return gulp.src(['src/**/*.ts'])
    .pipe(tsProject())
    .pipe(gulp.dest('./dist/src'));
});

gulp.task('compile:with:maps', function () {
  var tsProject = tsc.createProject('tsconfig.json');
  var tsResult = gulp.src(['src/**/*.ts'])
    .pipe(sourcemaps.init())
    .pipe(tsProject());
  return tsResult.js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/src'));
});

gulp.task('compile', ['compile:with:dts', 'compile:with:maps']);

Answer 1

您的示例中有两个流:

• tsResult 包含类型文件
• tsResult.js 包含转译后的 JavaScript 文件

您所要做的就是使用 merge-stream 将它们合并为一个流:

var tsc = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var merge = require('merge-stream');

gulp.task('compile', function () {
  var tsProject = tsc.createProject('tsconfig.json');
  var tsResult = gulp.src(['src/**/*.ts'])
    .pipe(sourcemaps.init())
    .pipe(tsProject());
  return merge(tsResult, tsResult.js)
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/src'));
});