typescript gulp 任务错误

Question

我正在尝试在 gulpfile.js

中添加 typescript 任务

以前我使用命令npm run tsc来编译在tsconfig.js中配置的打字稿：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

现在我想从 gulp 任务编译打字稿。在 gulpfile.js:

var gulp    = require( 'gulp' );
var plugins = require( 'gulp-load-plugins' )();
var tsfiles = 'src/app/**/*.ts';

gulp.task('compile', function(){
   return gulp.src(tsfiles)
      // .pipe(plugins.sourcemaps.init()) 
      .pipe(plugins.typescript({
          noImplicitAny: true,
          out: 'output.js'
      }))
      // .pipe(plugins.sourcemaps.write('src/app/maps', {includeContent:false, sourceRoot:'/app'}))
      .pipe(gulp.dest('src/app/')); 
});

但是，我遇到了 4 个错误

[18:20:16] Starting 'typescriptIt'...
src\app\app.ts(1,1): error TS1148: Cannot compile modules unless the '--module' flag is provided.
src\app\app.ts(1,36): error TS2307: Cannot find module 'angular2/angular2'.
src\app\app.ts(2,1): error TS1205: Decorators are only available when targeting ECMAScript 5 and higher.
src\app\app.ts(6,7): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning.
[18:20:18] TypeScript: 4 semantic errors
[18:20:18] TypeScript: emit succeeded (with errors)

如果您有更好的 typescript 任务实现，请分享

Answer 1

我以前从未见过以这种方式加载的插件，但是如果您将 gulpfile.js 包放在 gulpfile.js 的顶部，那么 gulp 包肯定可以访问。

var typescript = require("gulp-typescript");

Answer 2

我正在使用 gulp-tsc 编译我的 TypeScript。

在我的 gulpfile 中：

var typescript = require('gulp-tsc');

// all typescript files
var typeScriptFiles = [
    'folder/**/*.ts'];

// set the tasks to run
gulp.task('dev', ['compile-ts', 'tsc-watch']);


// watch all TypeScript files
gulp.task('tsc-watch', function() {
    watch(typeScriptFiles, function(file) {
        gulp.start('compile-ts');
    });
});

// compile TypeScript files into folder/ts.gen.js
gulp.task('compile-ts', function(){
  gulp.src(typeScriptFiles)
    .pipe(typescript({out: 'ts.gen.js', emitError: false}))
    .pipe(gulp.dest('folder/'));
});

运行 gulp dev 将监视指定的 TypeScript 文件并在更改时编译它们。

Answer 3

我已经弄明白了，解决方法很简单，我只是导入了 tsconfig.json，所有错误都消失了

var tsProject = plugins.typescript.createProject('src/tsconfig.json');
gulp.task('compilets', function(){
   return gulp.src(tsfiles)
       // .pipe(plugins.sourcemaps.init()) 
        .pipe(plugins.typescript(tsProject))
       // .pipe(plugins.sourcemaps.write('src/app/maps', {includeContent:false, sourceRoot:'/app'}))
        .pipe(gulp.dest(paths.app))
        .pipe(browserSync.stream());
});

Answer 4

您需要在 typescriptFiles 中包含 Typescript 定义文件。

var typeScriptFiles = [ 'folder/**/*.ts', 'typings/tsd.d.ts //the tsd.d.ts references all the definitions installed ];

正在安装 Typescript 定义

npm install -g tsd

tsd init

tsd install angular --save

这将创建一个 typings 目录，其中包含您的 typescript definition folders and files 和一个引用所有这些文件的 tsd.d.ts 文件。从 typescript 转译为 javascript.

时将需要此文件

希望对您有所帮助。祝你好运。

typescript gulp 任务错误

typescript gulp task error

workflow

typescript

gulp