CODEWITHSUNDEEP
babeljsgulp-babel
Mahesh
Mahesh

Reputation: 3997

gulp-babel transpile from >=ES6 to ES5

I have been unable to transpile ES6 to ES5 using gulp-babel.

This seems to be an open issue on github/babel/gulp-babel.

However, I was able to get this working well with browserify Refer a sample I made

But I am trying to use the gulp-babel package

I have the following setup. Which is what I have been using, but I still get just a minified file with all require lines in it.

gulpfile.js

const gulp = require("gulp");
const babel = require("gulp-babel");
const sourcemaps = require("gulp-sourcemaps");
const uglify = require("gulp-uglify-es").default;
const concat = require("gulp-concat");

gulp.task("buildjs", () => {
  return gulp.src(paths.js.source)
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(concat(paths.build.destMinJSFileName))
    .pipe(babel())
    .pipe(uglify())
    .pipe(sourcemaps.write(paths.build.destMapFolder))
    .pipe(gulp.dest(paths.build.destBuildFolder));
});

.babelrc

{
    "presets": ["@babel/preset-env"]
}

package.json

"@babel/core": "^7.3.4",
"@babel/polyfill": "^7.2.5",
"gulp": "^4.0.0",
"gulp-concat": "^2.5.2",
"gulp-sourcemaps": "^1.5.2",
"gulp-uglify-es": "^1.0.4"

entry.js (paths.js.source)

require("@babel/polyfill");
require("./main")

bundle.min.js (actual output)

"use strict";require("@babel/polyfill"),require("./main")
//# sourceMappingURL=maps/bundle.min.js.map

Upvotes: 1

Views: 7486

Answers (2)

Mahesh
Mahesh

Reputation: 3997

So it turns out, that is is expected. Babel would only transpile ES6 and above to ES5.

Module like browserify or webpack needs to be used in order to get the require module working.

Here is an example

Upvotes: 1

shinyatk
shinyatk

Reputation: 1065

Please check your babel and gulp-babel version.

If you are using babel version 6, you need to explicitly install/use gulp-babel version 7.

If you are using babel version 7, you need to gulp-babel version 8 which you can get npm run i --save-dev gulp-babel for now.

https://www.npmjs.com/package/gulp-babel

Babel 7:
npm install --save-dev gulp-babel @babel/core @babel/preset-env

Babel 6:
npm install --save-dev gulp-babel@7 babel-core babel-preset-env

Upvotes: 0

Related Questions