Babel transpile string to es2015

Question

When i'm using babeljs repl with the below code, i get an output that is different that the one i'm getting when i'm using in my node project.

This is the code i'm testing

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

test();

and babeljs repl output is

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

but when i use it from my project

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

i get this output

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

the .babelrc file is

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

How can i have the same output as the one on babeljs repl?

Answer 1

Whatever you see in the babeljs repl output is the babel runtime helpers. These helpers are generated based on the target browsers you use with preset env.

So if use in babel preset,

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

It will give me the exact output you pasted above.

But if I change the targets to

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

Then it will give me much cleaner output as it is not supporting IE11 now.