web-dev-qa-db-fra.com

Comment convertir .jsx en .js avec Gulp et Babel?

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

Avant d'utiliser gulp-react:

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

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

Cela fonctionne mais non sans quelques petites erreurs. Lorsque j'utilise le site Web de Babel ( https://babeljs.io/repl/ ) tout se transforme correctement. Pourriez-vous m'aider. Comment puis-je configurer gulp pour convertir les fichiers .JSX?

reactjsgulpbabeljs
18
user5460152

Vous devez d'abord installer ces deux packages:

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

alors 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/"));
});
34
Navid Farahzadi

Pour que displayName soit automatiquement inséré lors de la transformation, vous devez installer gulp-babel et React preset :

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

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"));
});
6
itacode
gulp.task('build', ['copy'], function() {
    gulp.src([
            'src/**/*.jsx',
            'src/**/*.js',
            '!./node_modules/**'
        ])
        .pipe(babel({
            presets: ['es2015', 'react']
        }))
        .pipe(gulp.dest('app'));
});

puisque j'utilise également ES6.

2
Jan Franz Palngipang

Pour les dernières React v16.8.x utilisant Babel 7, utilisez @babel/preset-env et @babel/preset-react modules.

npm i -D @babel/preset-env @babel/preset-react

Puis dans votre gulpfile.js:

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

gulp.task("whatever_task_name_you_prefer", function(){
    return gulp.src("src/jsx/*.jsx")
        .pipe(babel({
            presets: ["@babel/preset-env", @babel/preset-react"]
        }))
        .pipe(gulp.dest("dist"));
});
1
Waleed93

Ouais, utiliser gulp avec le paquet gulp-babel ferait l'affaire.
https://github.com/babel/gulp-babel

0
Robbie