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"
}
]
]
},
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.