如何配置 gulp 来编译 .jsx 和 .ts 文件？答案

【问题标题】：How to configure gulp to compile both .jsx and .ts files?如何配置 gulp 来编译 .jsx 和 .ts 文件？
【发布时间】：2017-11-18 08:12:46
【问题描述】：

我的客户端代码在 react native 即 .jsx 文件中，我正在使用 gulp 编译它们。我想将我的项目转换为开始使用打字稿，但一次使用 1 个文件。这意味着我需要能够使用 gulp 编译 jsx 和 ts。

我正在使用下面的 gulp --

/// <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);
});

我必须对我的 gulp 配置进行哪些更改以确保 .jsx 和 .ts 文件都能正常工作和编译。

【问题讨论】：

标签： reactjs typescript gulp

【解决方案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 添加扩展，但我认为它不会起作用。

希望有帮助！

【讨论】：