为什么babeljs.io输出与gulp-babel输出不同？

时间：2018-11-12 12:29:53

标签： ecmascript-6 gulp babel ecmascript-5 gulp-babel

背景

我正在尝试将我的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

1 个答案:

答案 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预设（这是年度预设列表下方的单独部分），则会得到相同的输出。

相关问题
最新问题