将箭头函数转换为没有变量赋值的命名函数

Posted 2023-03-24

【中文标题】将箭头函数转换为没有变量赋值的命名函数

【英文标题】：Transpile Arrow Functions into Named Functions without Variable Assignment

【发布时间】：2020-10-14 15:09:15

【问题描述】：

Babel（下面的配置）转换以下简单的箭头函数：

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

...进入以下：

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

我想要产生的结果是这样的：

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

换句话说，我希望 Babel 将分配的箭头函数转换为 ES5 命名函数而不将函数分配给变量。 这可能吗？如果可以，怎么做？

我的构建管道包含一个 uglify 任务，它会破坏变量名称（但不是函数名称）。我可以使用 uglify 的 mangle: reserved: [] 选项，但这需要手动跟踪每个命名的箭头函数。

---

来自 package.json：

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

【问题讨论】：

你为什么在乎？不，这通常是不可能的，因为 const 声明和函数表达式是分开处理的（将其更改为函数声明在语义上是错误的）。当然你可以编写自己的 babel 插件来做到这一点。

我很关心 gulp-uglify 如何破坏变量（但不是命名函数）。它只是通过

您要求的转换也会导致函数被提升，可能会引入不同的运行时行为，这就是 Babel 不这样做的原因。您是否明确将 toplevel: true 传递给 Uglify？否则据我所知，它不应该破坏***变量。这一切真的似乎你应该问一个关于如何配置 Uglify，而不是 Babel 的问题。

谢谢，@loganfsmyth - 你是对的。在进一步挖掘之后，事实证明真正的罪魁祸首发生在预处理的更早一步。我以一种基本上使浏览器无法访问这些功能的方式包装了普通的 javascript（通过browserify）。 Uglify 并没有破坏函数，它（正确地）将它们识别为死代码并完全丢弃它们。 （我正在用纯 Javascript 重写一堆 jQuery 脚本，这在构建过程中造成了错误。）

啊，那绝对可以，很高兴你能找到它！

【参考方案1】：

根据上面的 cmets，答案似乎是，“你不应该这样做。”

Babel 转换如上所示的箭头函数以避免生产中潜在的意外副作用。