Как конвертировать .jsx в .js с помощью Gulp и Babel?

Мне нужно преобразовать все файлы /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 файлов?

ОТВЕТЫ

Ответ 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/"));
});

Ответ 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"));
});

Ответ 3

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

так как я также использую ES6.