9/26/2019 - 1:49 PM

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

[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) {

gulp.task("transpile", function() {
  return gulp
    .pipe(babel({ presets: ["@babel/react", "@babel/env"] }))
    .on("error", handleError)