Reputation: 3997
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
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
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