gulpを設定して.jsxと.tsファイルの両方をコンパイルする方法は？

Question

クライアント側のコードがネイティブの.jsxファイルに対応しています。私はgulpを使用してコンパイルしています。私は、私のプロジェクトをtypescriptを使用して開始するように変換したいが、一度に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を反応タスクに追加します。あなたのコードに応じて、あなたにもTSで動作するようにbabelify設定する必要があります

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する拡張機能を追加することなく、試みることができるが、私はそれがうまくいくとは思いません。

希望に役立ちます！