Odtnhj

Background

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 , 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?

Other Useful files

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 );

@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 deprecated babel-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.