javascript - Babel 将字符串转译为 es2015

Question

当我将 babeljs repl 与以下代码一起使用时，我得到的输出与我在节点项目中使用时得到的输出不同。

这是我正在测试的代码

function test(list) {
  return [...list];
}

test();

和 babeljs repl 输出是

"use strict";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function test(list) {
  return _toConsumableArray(list);
}

test();

但是当我从我的项目中使用它时

const babel = require("@babel/core");

const code = `
    function test(list) {
        return [...list];
    }

    test();
`;

babel.transform(
    code,
    {
        babelrc: true,
        filename: ".babelrc"
    },
    (err, result) => {
        console.log(result.code);
    }
);

我得到这个输出

var _toConsumableArray = require("D:/Work/Projects/new-setup/node_modules/@babel/runtime/helpers/toConsu
mableArray");                                                                                                                               
                                                                                                                                            
function test(list) {                                                                                                                       
  return _toConsumableArray(list);                                                                                                          
}                                                                                                                                           
                                                                                                                                            
test();                                                                                                                                     

.babelrc 文件是

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "corejs": 3,
                "useBuiltIns": "entry"
            }
        ]
    ]
}

我怎样才能获得与 babeljs repl 上相同的输出？

标签： javascriptbabeljsbabel-polyfill

Answer 1

无论你在 babeljs repl 输出中看到什么，都是 babel 运行时助手。这些帮助程序是根据您使用预设环境的目标浏览器生成的。

所以如果在 babel 预设中使用，

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "corejs": 3,
                "useBuiltIns": "entry",
                "targets": "defaults"
            }
        ]
    ]
}

它会给我你上面粘贴的确切输出。

但是如果我将目标更改为

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "corejs": 3,
                "useBuiltIns": "entry",
                "targets": "defaults, not ie 11, not ie_mob 11"
            }
        ]
    ]
}

然后它会给我更清晰的输出，因为它现在不支持 IE11。