GulpとBabelで.jsxから.jsに変換するにはどうすればよいですか？

Question

私は一口-反応に使用する前にはsrc/の.js

/にすべて/ SRC/.jsxのファイルを変換する必要があります：それはいくつかの小さなミスなしで動作しますが、ない

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

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

を。 私はバベルのウェブサイト（https://babeljs.io/repl/）を使用するとすべてが正しく変換されます。私たちを手伝ってくれますか。 .JSXファイルを変換するにはどうすればよいですか？

Answer 1

gulp-babelパッケージでgulpを使用している場合は、このトリックを行います。そして、あなたはこのように変換することができます

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

：
https://github.com/babel/gulp-babel

Answer 2

まずあなたは、この二つのパッケージをインストールする必要があり

自動変換に挿入されたのdisplayNameを取得するために

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

、あなたがする必要があります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 4

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

私もES6を使用しておりますので。