I am trying to transpile my ES6 js to ES5 js. When I visit the https://babeljs.io/repl webpage to test out what babel should output for the preset option es2015
it outputs JavaScript that is different than what gulp-babel
outputs.
Input ES6 JavaScript
// eslint-disable-next-line no-unused-vars
function getStars() {
// Round the number like "3.5k" https://stackoverflow.com/a/9461657
const round = num => (num > 999 ? `${(num / 1000).toFixed(1)}k` : num);
// Add the most recent star count to the repositories.
// eslint-disable-next-line no-undef
document.querySelectorAll('.repositories .repo a').forEach(async (a) => {
const link = a;
const name = link.getAttribute('href').split('/').slice(-2).join('/');
const url = `https://api.github.com/repos/${name}`;
const { starGazersCount } = await fetch(url).then(res => res.json());
if (!starGazersCount) return;
link.querySelector('.stars').innerText = `${'⭐️ '}${round(starGazersCount)}`;
});
}
babeljs.io
output ~Desired Output~
'use strict';
// eslint-disable-next-line no-unused-vars
function getStars() {
// Round the number like "3.5k" https://stackoverflow.com/a/9461657
var round = function round(num) {
return num > 999 ? (num / 1000).toFixed(1) + 'k' : num;
};
// Add the most recent star count to the repositories.
// eslint-disable-next-line no-undef
document.querySelectorAll('.repositories .repo a').forEach(async function (a) {
var link = a;
var name = link.getAttribute('href').split('/').slice(-2).join('/');
var url = 'https://api.github.com/repos/' + name;
var _ref = await fetch(url).then(function (res) {
return res.json();
}),
starGazersCount = _ref.starGazersCount;
if (!starGazersCount) return;
link.querySelector('.stars').innerText = '⭐️ ' + round(starGazersCount);
});
}
gulp-babel
output
"use strict";
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
(function () {
function r(e, n, t) {
function o(i, f) {
if (!n[i]) {
if (!e[i]) {
var c = "function" == typeof require && require;
if (!f && c) return c(i, !0);
if (u) return u(i, !0);
var a = new Error("Cannot find module '" + i + "'");
throw a.code = "MODULE_NOT_FOUND", a;
}
var p = n[i] = {
exports: {}
};
e[i][0].call(p.exports, function (r) {
var n = e[i][1][r];
return o(n || r);
}, p, p.exports, r, e, n, t);
}
return n[i].exports;
}
for (var u = "function" == typeof require && require, i = 0; i < t.length; i++) {
o(t[i]);
}
return o;
}
return r;
})()({
1: [function (require, module, exports) {
// eslint-disable-next-line no-unused-vars
function getStars() {
// Round the number like "3.5k" https://stackoverflow.com/a/9461657
var round = function round(num) {
return num > 999 ? "".concat((num / 1000).toFixed(1), "k") : num;
}; // Add the most recent star count to the repositories.
// eslint-disable-next-line no-undef
document.querySelectorAll('.repositories .repo a').forEach(
/*#__PURE__*/
function () {
var _ref = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(a) {
var link, name, url, _ref2, starGazersCount;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
link = a;
name = link.getAttribute('href').split('/').slice(-2).join('/');
url = "https://api.github.com/repos/".concat(name);
_context.next = 5;
return fetch(url).then(function (res) {
return res.json();
});
case 5:
_ref2 = _context.sent;
starGazersCount = _ref2.starGazersCount;
if (starGazersCount) {
_context.next = 9;
break;
}
return _context.abrupt("return");
case 9:
link.querySelector('.stars').innerText = '⭐️ '.concat(round(starGazersCount));
case 10:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}());
}
}, {}]
}, {}, [1]);
⚠️Notice how the gulp-babel
output contains polyfill functions such as _asyncToGenerator
& asyncGeneratorStep
.
Why does the online babel editor not output this when using the es2015
preset?
Below is my .babelrc
:
{
"presets": [
"@babel/preset-env"
]
}
Below is my package.json
:
{
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-preset-env": "^1.7.0",
"bower": "^1.8.2",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-changed": "^3.2.0",
"gulp-cssnano": "^2.1.2",
"gulp-error-handle": "^1.0.0",
"gulp-eslint": "^5.0.0",
"gulp-gh-pages": "^0.5.4",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^5.0.3",
"gulp-include": "^2.3.1",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-pug": "^4.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "*",
"gulp-size": "^3.0.0",
"gulp-sourcemaps": "^2.6.*",
"gulp-strip-css-comments": "^2.0.0",
"gulp-strip-debug": "^3.0.0",
"gulp-surge": "^0.1.0",
"gulp-terser": "^1.1.5",
"gulp-util": "^3.0.8",
"localtunnel": "^1.8.3",
"main-bower-files": "^2.13.1",
"path": "^0.12.7",
"postcss-cli": "^6.0.1",
"run-sequence": "^2.2.1",
"yarn": "^1.12.3"
},
"dependencies": {
"animate.css": "latest",
"argv": "^0.0.2",
"autoprefixer": "^9.3.1",
"babel-polyfill": "^6.26.0",
"browser-sync": "^2.18.13",
"browserify": "^16.2.3",
"bulma": "latest",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-load-plugins": "^1.5.0",
"hamburgers": "latest",
"hover": "latest",
"imagemin-pngquant": "^6.0.0",
"isinviewport": "latest",
"jquery": "latest",
"lost": "^8.2.0",
"minimist": "^1.2.0",
"moment": "^2.22.2",
"node-bourbon": "^4.2.8",
"node-neat": "^2.0.0-beta.0",
"psi": "^3.1.0",
"require-dir": "^1.1.0",
"rucksack-css": "^1.0.2",
"vanilla-lazyload": "latest",
"vinyl-buffer": "^1.0.1",
"vinyl-ftp": "^0.6.0",
"vinyl-source-stream": "^2.0.0"
}
}
Below is my js
task for gulp
:
'use-strict';
const gulp = require('gulp');
const $ = require('gulp-load-plugins')({ lazy: true });
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const paths = require('../../paths.js');
const config = require('../../config.js')();
gulp.task('eslint', () => {
console.log('-> Running eslint');
// Select files
gulp.src(`${paths.to.js.in}/**/*.js`)
// Prevent pipe breaking caused by errors from gulp plugins
.pipe($.plumber())
// Check for lint errors
.pipe($.eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe($.eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failAfterError last.
.pipe($.eslint.failAfterError());
});
gulp.task('js', ['eslint'], () => {
const env = ((config.environment || process.env.NODE_ENV || 'development').trim().toLowerCase() !== 'production');
console.log(`-> Compiling JavaScript for ${config.environment}`);
// Obtain a readable stream containing the processed browserified bundle
const bundle = browserify({
entries: paths.to.js.in,
debug: env,
})
.bundle()
// Convert browserify stream to a gulp-readable steam & buffer
.pipe(source(config.js.name))
.pipe(buffer());
if (env) {
// Select bundle
bundle
// Initialize sourcemaps
.pipe($.sourcemaps.init())
// Prevent pipe breaking caused by errors from gulp plugins
.pipe($.plumber())
// Concatenate includes
.pipe($.include({
includePaths: [`${paths.to.js.in}`],
}))
// Transpile
.pipe($.babel())
// Catch errors
.pipe($.errorHandle())
// Save sourcemaps
.pipe($.sourcemaps.write('.'))
// Save unminified file
.pipe(gulp.dest(`${paths.to.js.out}`));
} else {
// Select bundle
bundle
// Prevent pipe breaking caused by errors from gulp plugins
.pipe($.plumber())
// Concatenate includes
.pipe($.include({
includePaths: [`${paths.to.js.in}`],
}))
// Transpile
.pipe($.babel())
// Catch errors
.pipe($.errorHandle())
// Show file-size before compression
.pipe($.size({ title: 'Javascript In Size' }))
// Optimize and minify
.pipe($.terser())
// Show file-size after compression
.pipe($.size({ title: 'Javascript Out Size' }))
// Append suffix
.pipe($.rename({
suffix: '.min',
}))
// Save minified file
.pipe(gulp.dest(`${paths.to.js.out}`));
}
});
@babel/preset-env
is not the same thing as @babel/preset-es2015
- the former turns plugins on and off based on your targeted browser compatibility metrics (which you can customize).
The docs say that if you don't explicitly specify the targets in the preset's config, the following defaults will be used:
Sidenote, if no targets are specified,
@babel/preset-env
behaves exactly the same as@babel/preset-es2015
,@babel/preset-es2016
and@babel/preset-es2017
together (or the deprecatedbabel-preset-latest
).
@babel/preset-es2015
alone, on the other hand, will only compile features that were added in the ES2015 version of the spec. This does not include newer features, such as async/await! If you want all of the features added since then, you will have to add all of the yearly presets. For this reason, it's recommended that you use the env
preset.
If you switch https://babeljs.io to the @babel/preset-env
preset (which is a seperate section below the list of yearly presets), you get the same output.