reactjs - 如何使用 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/"));
});