How to transpile jsx code with gulp?

Question

JavaScript

gulpfile.js

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

gulp.task('babel', function() {
    return gulp.src('js/source/**/*.js')
        .pipe(babel())
        .pipe(gulp.dest('js/build'))
});

package.json -> devDependencies

{
    "@babel/core": "^7.0.0-beta.53",
    "@babel/preset-env": "^7.0.0-beta.53",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0-beta.2",
    "gulp-browserify": "^0.5.1",
    "gulp-watch": "^5.0.0"
  }

A:\App>gulp babel
[13:24:03] Using gulpfile A:\App\gulpfile.js
[13:24:03] Starting 'babel'...

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: Plugin/Preset files are not allowed to export objects, only functions. In A:\App\node_modules\babel-preset-es2015\lib\index.js

How to transpile code? The error is thrown from above. Please tell me the working task

Answer 1

Install the babel-plugin-transform-react-jsx plugin and then enable it.

gulp.task('babel', function() {
    return gulp.src('js/source/**/*.js')
        .pipe(babel({
            plugins: ['transform-react-jsx']
        }))
        .pipe(gulp.dest('js/build'))
});

Answer 2

Install webpack and don't worry about setting up