Come convertire .jsx in .js con Gulp e Babel?

Question

Ho bisogno di convertire tutti i/src/file .jsx a/src/ .js

Prima ho usato gulp-reagiscono:

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

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

Funziona, ma non senza qualche piccolo errore. Quando utilizzo il sito Web Babel (https://babeljs.io/repl/) tutte le conversioni sono corrette. Potresti aiutarmi. Come posso impostare gulp per convertire i file .JSX?

Answer 1

Sì, usando il gulp con il pacchetto gulp-babel farebbe il trucco.
https://github.com/babel/gulp-babel

Answer 2

In primo luogo è necessario installare questi due pacchetti:

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

allora è possibile convertire in questo modo:

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 3

Al fine di ottenere displayName inserita automaticamente in trasformazione, è necessario installa gulp-babel e React preset:

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

e poi nelle 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 4

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

dal momento che sto anche utilizzando ES6.