我正在尝试将我的ES6 js转换为ES5 js。当我访问https://babeljs.io/repl网页测试预设选项es2015
应该输出什么babel时,它输出的JavaScript与gulp-babel
输出的JavaScript不同。
输入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
输出 〜所需的输出〜
'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
输出
"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]);
⚠️请注意gulp-babel
输出如何包含诸如_asyncToGenerator
和asyncGeneratorStep
之类的polyfill函数。
使用es2015
预设时,为什么在线babel编辑器不输出此内容?
下面是我的.babelrc
:
{
"presets": [
"@babel/preset-env"
]
}
下面是我的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"
}
}
下面是我对js
的{{1}}任务:
gulp
答案 0 :(得分:1)
@babel/preset-env
与@babel/preset-es2015
是不同的东西-前者根据您的目标浏览器兼容性指标(which you can customize)打开和关闭插件。
文档说,如果您未在预设的配置中明确指定目标,则将使用以下默认值:
另一方面,仅旁注,如果未指定目标,则
@babel/preset-env
的行为与@babel/preset-es2015
,@babel/preset-es2016
和@babel/preset-es2017
在一起(或不建议使用的babel-preset-latest
)完全相同。
@babel/preset-es2015
仅 会编译规范的ES2015版本中添加的功能。这不包括更新的功能,例如异步/等待!如果要此后添加所有功能,则必须添加 all 个年度预设。因此,建议您使用env
预设。
如果将https://babeljs.io切换到@babel/preset-env
预设(这是年度预设列表下方的单独部分),则会得到相同的输出。