Transpile Arrow Functions into Named Functions without Variable Assignment

211 Views Asked by At

Babel (config below) transpiles the following simple arrow function:

const clipboard = id => {
  const scratchpad = document.createElement('input');
  scratchpad.value = document.getElementById(id).innerText;
  document.body.appendChild(scratchpad);
  scratchpad.select();
  document.execCommand('copy');
  document.body.removeChild(scratchpad);
}

...into the following:

var clipboard = function clipboard(id) {
  var scratchpad = document.createElement('input');
  scratchpad.value = document.getElementById(id).innerText;
  document.body.appendChild(scratchpad);
  scratchpad.select();
  document.execCommand('copy');
  document.body.removeChild(scratchpad);
};

The result I want to produce is this:

function clipboard(id) {
  var scratchpad = document.createElement('input');
  scratchpad.value = document.getElementById(id).innerText;
  document.body.appendChild(scratchpad);
  scratchpad.select();
  document.execCommand('copy');
  document.body.removeChild(scratchpad);
};

In other words, I want Babel to transpile assigned arrow functions into ES5 named functions without assigning the function to a variable. Is this possible, and if so, how?

My build pipeline includes an uglify task, which mangles variable names (but not function names). I can use uglify's mangle: { reserved: [] } option, but that would require manually tracking every named arrow function.


From package.json:

"browserslist": "defaults",
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "usage",
          "corejs": "3.6.5"
        }
      ]
    ]
  },
1

There are 1 best solutions below

0
On BEST ANSWER

Based on the comments above the answer seems to be, "You should not want to do this."

Babel transforms arrow functions as illustrated above in order to avoid potential unintended side effects in production.