如何配置gulp來編譯.jsx和.ts文件？

Question

我有我的客戶端代碼反應本機即.jsx文件，我用gulp來編譯它們。我想轉換我的項目，開始使用打字稿，但一次1個文件。這意味着我需要能夠使用gulp來編譯jsx和ts。

我使用的是下面一飲而盡 -

/// <binding AfterBuild='default' /> 
"use strict"; 

var gulp = require("gulp"), 
    concat = require("gulp-concat"), 
    cssmin = require("gulp-cssmin"), 
    merge = require("merge-stream"), 
    del = require("del"), 
    bundleconfig = require("./bundleconfig.json"), 
    runSequence = require('run-sequence'); 

var runSequence = require('run-sequence'); 

var sass = require('gulp-sass'); 

var browserify = require('browserify'); 
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 

var webroot = "./wwwroot/"; 
var paths = { 
    scss: webroot + "sass/**/*.scss", 
    scssDest: webroot + "css/" 
}; 

// 1. react 
gulp.task('react', function() { 
    return browserify({ entries: './wwwroot/clientapp/root', extensions: [ '.jsx', '.js'], debug: true }) 
     .transform('babelify', { presets: ['es2015', 'react'] }) 
     .bundle() 
     .pipe(source('index.js')) 
     .pipe(gulp.dest('./wwwroot/')); 
}); 

// 2. sass 
gulp.task('compile:sass', function() { 
    gulp.src(paths.scss) 
     .pipe(sass()) 
     .pipe(gulp.dest(paths.scssDest)); 
}); 
gulp.task("sass", ["compile:sass"]); 

// minify sass output 
function getBundles(regexPattern) { 
    return bundleconfig.filter(function (bundle) { 
     return regexPattern.test(bundle.outputFileName); 
    }); 
} 
gulp.task("css", function() { 
    var tasks = getBundles(/\.css$/).map(function (bundle) { 
     return gulp.src(bundle.inputFiles, { base: "." }) 
      .pipe(concat(bundle.outputFileName)) 
      .pipe(cssmin()) 
      .pipe(gulp.dest(".")); 
    }); 
    return merge(tasks); 
}); 

gulp.task("clean", function() { 
    return del(['wwwroot/css/*', 'wwwroot/index.js']); 
}); 

gulp.task("default", function (cb) { 
    runSequence(
     ['clean', 'sass'], 
     ['react'], 
     ['css'], 
     cb); 
}); 

我會怎樣的變化做我一口配置，以確保兩個.jsx和.ts文件工作和編譯。

Answer 1

添加.ts擴展以反應任務。根據你的代碼，你將不得不babelify配置與TS工作以及

gulp.task('react', function() { 
    return browserify({ entries: './wwwroot/clientapp/root', extensions: [ '.jsx', '.js', '.ts'], debug: true }) 
     .transform('babelify', { presets: ['es2015', 'react'], extensions: [ '.jsx', '.js', '.ts'] }) 
     .bundle() 
     .pipe(source('index.js')) 
     .pipe(gulp.dest('./wwwroot/')); 
}); 

你可以嘗試無需添加擴展babelify，但我不認爲它會工作。

希望有幫助！