How convert .jsx to .js with Gulp and Babel?

Question

I need to convert all /src/.jsx files to /src/.js

Before I used gulp-react:

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

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

It works but not without some small mistakes. When I use Babel website (https://babeljs.io/repl/) all converts right. Could you help me. How can I set gulp to convert .JSX files?

Seems like the documentation on Babel's website covers this: http://babeljs.io/docs/setup/#gulp And there are tons of resources already explaining how to use `gulp-rename`. — loganfsmyth, Oct 20 '15 at 18:31
gulp.task('jsx', function () { return gulp.src('src/jsx/*.jsx') .pipe(babel()) .pipe(gulp.dest('src/js/')); }); — , Oct 20 '15 at 18:34
I'm not sure what you're trying to say with that comment. Yep, that'll compile. Then you can rename with `gulp-rename`. — loganfsmyth, Oct 20 '15 at 19:51

score 35 · Answer 1 · edited Nov 04 '19 at 14:53

35

First you need to install these two packages:

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

then you can convert like this:

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

edited Nov 04 '19 at 14:53

jedierikb

12,752
22
95
166

answered May 02 '16 at 20:48

Navid Farahzadi

681
7
14

1

Thanks, seemed like I needed `babel-core` installed as well. – SSH This Sep 21 '17 at 19:15
1

This is such a useful answer. Lots of situations where someone *just* needs the JSX transformation and nothing else. – TKoL Feb 12 '18 at 14:55
Hat to import @babel/core instead of babel-core. See: https://github.com/babel/gulp-babel/issues/124#issuecomment-326853222 – plexus May 03 '19 at 11:01
Can you please add your package.json file also for this transformation. – Jitendra Pancholi Sep 12 '19 at 09:55
https://babeljs.io/docs/en/babel-plugin-transform-react-jsx it worked for me with latest version – Jitendra Pancholi Sep 12 '19 at 11:24

score 6 · Answer 2 · answered Oct 04 '16 at 04:24

In order to get displayName automatically inserted on transformation, you need to install gulp-babel and React preset:

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

and then in the 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"));
});

score 2 · Answer 3 · answered Oct 04 '16 at 06:06

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

since I am also using ES6.

score 2 · Answer 4 · answered Jul 31 '19 at 22:44

For latest React v16.8.x using Babel 7, use @babel/preset-env and @babel/preset-react modules.

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

Then in your 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"));
});

Don't forget the quotes — presets: ["@babel/preset-env", "@babel/preset-react"] — sergekol, Nov 19 '21 at 13:39

score 0 · Answer 5 · answered Jan 14 '16 at 03:23

0

Yeah using gulp with the package gulp-babel would do the trick.
https://github.com/babel/gulp-babel

answered Jan 14 '16 at 03:23

Robbie

45
4

How convert .jsx to .js with Gulp and Babel?

5 Answers5

Linked