Question

我需要将所有/src/.jsx文件转换为/ src / .js

在我使用gulp-react之前：

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

gulp.task('jsx', function () {
  return gulp.src('src/jsx/*.jsx')
   .pipe(react())
   .pipe(gulp.dest('src/js/'));
});

它有效，但不是没有一些小错误。当我使用Babel网站（https://babeljs.io/repl/）时，所有转换都是正确的。你可以帮帮我吗。如何设置gulp来转换.JSX文件？

Answer 1

首先，您需要安装这两个软件包：

npm install gulp-babel babel-plugin-transform-react-jsx

然后你可以像这样转换：

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

gulp.task("babel", function(){
    return gulp.src("src/jsx/*.jsx").
        pipe(babel({
            plugins: ['transform-react-jsx']
        })).
        pipe(gulp.dest("src/js/"));
});

Answer 2

为了在转换时自动插入displayName，您需要安装gulp-babel和React preset：

npm install --save-dev gulp-babel babel-preset-react

然后在gulpfile.js中：

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

gulp.task("jsx", function(){
    return gulp.src("src/jsx/*.jsx")
        .pipe(babel({
            presets: ["react"]
        }))
        .pipe(gulp.dest("src/js"));
});

Answer 3

gulp.task('build', ['copy'], function() {
    gulp.src([
            'src/**/*.jsx',
            'src/**/*.js',
            '!./node_modules/**'
        ])
        .pipe(babel({
            presets: ['es2015', 'react']
        }))
        .pipe(gulp.dest('app'));
});

因为我也在使用ES6。

Answer 4

对于使用 Babel 7 的最新 React v16.8.x ，请使用@babel/preset-env和@babel/preset-react模块。

npm i -D @babel/preset-env @babel/preset-react

然后在您的 gulpfile.js 中：

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

gulp.task("whatever_task_name_you_prefer", function(){
    return gulp.src("src/jsx/*.jsx")
        .pipe(babel({
            presets: ["@babel/preset-env", @babel/preset-react"]
        }))
        .pipe(gulp.dest("dist"));
});

Answer 5

是的，用gulp-package包装gulp-babel可以做到这一点 https://github.com/babel/gulp-babel

如何用Gulp和Babel将.jsx转换为.js？

5 个答案: