TypeScript 编译建议 (TS + gulp + karma)

Question

我正在尝试提出一个可行的 TypeScript 构建步骤，其中包括以下内容：

编译 TypeScript（显然）
- 理想情况下允许编译器遍历依赖树
通过 karma 执行 jasmine 单元测试
不依赖 IDE 的（视觉 Studio/WebStorm）来执行测试和输出 JS
能够通过 WebStorm 的运行配置执行单元测试
代码覆盖率结果基于 TS 代码，而不是结果 JS

我目前的尝试涉及使用：

gulp-tsc
业力
karma-typescript-预处理器

我宁愿只需要运行一次编译步骤，因为现在我必须执行单元测试的预编译步骤和下面的 build-ts 输出到我的步骤dist 文件夹。我试过使用 karma-typescript-pre-processor，结果好坏参半，性能不佳（测试，16 秒 w/o 2 秒）。

注意：我还没有尝试解决代码覆盖方面的问题，因为我对现有的 build/unit 测试解决方案不满意。

我目前使用的karma文件是

module.exports = function(config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['jasmine'],
    files: [
      '../bower_components/angular/angular.js',
      '../bower_components/angular-mocks/angular-mocks.js',
      '../app/**/*_test.ts',
      {
        pattern: '../app/**/!(*_test).ts',
        included: false
      }
    ],
    preprocessors: {
      '../typings/jasmine/jasmine.d.ts': ['typescript'],
      '../app/**/*.ts': ['typescript']
    },
    typescriptPreprocessor: {
      options: {
        sourceMap: true,
        target: 'ES5',
        noResolve: false
      },
      transformPath: function(path) {
        return path.replace(/\.ts$/, '.js');
      }
    },
    //reporters: ['progress', 'growl'],
    colors: true
  });
};

gulp文件:

gulp.task('build-ts', function () {
  return gulp.src(paths.ts)
    .pipe(tsc({
      noResolve: false,
      out: 'app.js',
      outDir: paths.dist.js,
      removeComments: true,
      //sourcePath: '../../app/ts',
      //sourcemap: true,
      target: 'ES5'
    }))
    .pipe(gulp.dest(paths.dist.js))
    .pipe(connect.reload());
});

Answer 1

您可以在保存时使用gulp.watch编译打字稿文件。这样，当您运行测试时，打字稿已经编译。 gulp-tsc 模块应该有设置增量编译的指南。

TypeScript 编译建议 (TS + gulp + karma)

TypeScript Compile Suggestions (TS + gulp + karma)

typescript

gulp

karma-runner