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

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预设:

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 和 gulp-babel 包就可以了。
https://github.com/babel/gulp-babel