megclaypool
9/26/2019 - 1:49 PM

Compiling/Transpiling ES6/React Files to JavaScript ES5 Using Gulp

Install the necessary node packages:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-es2015 @babel/preset-react babel-polyfill gulp-babel

or add to devDependencies in package.json:

"devDependencies": {
...
    "@babel/core": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.0.0",
    "babel-polyfill": "^6.26.0",
    "gulp-babel": "^8.0.0",
  ...
  },

and then run npm install

Set up the gulp task

Note the extra handleError function so that if(/when) something goes wrong you get at least some clue as opposed to a silent fail

function handleError(error) {
  console.log(error.toString());
  this.emit("end");
}

gulp.task("transpile", function() {
  return gulp
    .src([
      "node_modules/babel-polyfill/dist/polyfill.js",
      "./lib/js/src/*.jsx"
    ])
    .pipe(babel({ presets: ["@babel/react", "@babel/env"] }))
    .on("error", handleError)
    .pipe(gulp.dest("./lib/js/"));
});