Cách chuyển đổi .jsx sang .js bằng Gulp và Babel?

Question

tôi cần phải chuyển đổi tất cả/src/file .jsx đến/src/ .js

Trước khi tôi sử dụng ngụm-phản ứng:

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

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

Nó hoạt động nhưng không phải không có một số lỗi nhỏ. Khi tôi sử dụng trang web Babel (https://babeljs.io/repl/), tất cả đều chuyển đổi đúng. Bạn có thể giúp tôi. Làm thế nào tôi có thể thiết lập gulp để chuyển đổi các tập tin .JSX?

Answer 1

Có sử dụng gói gulp với gói gulp-babel sẽ thực hiện thủ thuật.
https://github.com/babel/gulp-babel

Answer 2

Trước tiên, bạn cần phải cài đặt này hai gói:

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

sau đó bạn có thể chuyển đổi như thế này:

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

Để có được displayName tự động chèn vào chuyển đổi, bạn cần phải cài đặt gulp-babel và React preset:

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

và sau đó trong 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')); 
}); 

kể từ khi tôi cũng đang sử dụng ES6.