Comment convertir .jsx .js avec Gulp et Babel?

J'ai besoin de convertir tous /src/.jsx fichiers /src/.js

Avant, je gulp-réagir:

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

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

Il fonctionne, mais pas sans quelques petites erreurs.
Lorsque j'utilise Babel site web (https://babeljs.io/repl/) tous convertis à droite. Pourriez-vous m'aider. Comment puis-je définir gulp à convertir .JSX fichiers?

Semble que la documentation sur Babel site de couvre ceci: babeljs.io/docs/setup/#gulp Et il y a des tonnes de ressources déjà expliquant comment utiliser gulp-rename.
gulp.tâche('jsx', function () { return gulp.src('src/jsx/*.jsx') .pipe(babel()) .pipe(gulp.dest('src/js/')); });
Je ne suis pas sûr de ce que vous essayez de dire, avec ce commentaire. Yep, ça compile. Ensuite, vous pouvez les renommer avec gulp-rename.

OriginalL'auteur | 2015-10-20

  1. 30

    Vous devez d'abord installer les deux paquets:

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

    ensuite, vous pouvez convertir comme ceci:

    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/"));
});
    Merci, semblait que j'avais besoin de babel-core installé.
    C'est une réponse utile. Beaucoup de situations où quelqu'un besoins de la JSX transformation et rien d'autre.

    OriginalL'auteur Navid Farahzadi

  2. 5

    Afin d'obtenir displayName automatiquement inséré sur la transformation, vous devez installer gulp-babel et Réagir preset:

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

    et puis dans le 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"));
});

    OriginalL'auteur itacode

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

    depuis que je suis également en utilisant ES6.

    OriginalL'auteur Jan Franz Palngipang

  4. 0

    Oui à l'aide de gulp avec le paquet gulp-babel ferait l'affaire.

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

    OriginalL'auteur Robbie