गुलप और बेबेल के साथ .jsx से .js को कैसे परिवर्तित करें?// Src/</em> .js</p> <p>को src/<em>.jsx फ़ाइलों इससे पहले कि मैं इस्तेमाल किया घूंट प्रतिक्रिया

Question

मैं सभी बदलने की आवश्यकता:

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/) का उपयोग करता हूं तो सभी सही रूप से परिवर्तित होते हैं। क्या तुम मेरी मदद कर सकते हो। मैं कन्वर्ट करने के लिए गल्प सेट कैसे कर सकता हूं। जेएसएक्स फाइलें?

Answer 1

हाँ पैकेज पैकेज गल्प-बेबेल के साथ गल्प का उपयोग करके चाल चलती है।
https://github.com/babel/gulp-babel

Answer 2

सबसे पहले आप इस दो संकुल स्थापित करने की आवश्यकता:

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/")); 
}); 

Answer 3

आदेश DISPLAYNAME प्राप्त करने के लिए स्वचालित रूप से परिवर्तन पर डाला है, तो आप की जरूरत है गल्प-बेबेल स्थापित करें और 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 उपयोग कर रहा हूँ।