SWC编译后箭头函数被转成普通函数，怎么保留ES6语法？

东方铭轩提问于 2026-03-25 18:21:18 阅读 34

优化

我用SWC替换了Babel做构建，但发现原本的箭头函数全被转成了普通function，导致this指向出问题。项目目标环境是现代浏览器，根本不需要降级啊。

配置里已经设了jsc.target为es2020，但还是不行。是不是哪里漏了？比如这段代码：

const handleClick = () => {
  console.log(this.value);
};
document.addEventListener('click', handleClick);

编译后变成function声明，this就绑错上下文了，急！

SWC编译构建优化

我来解答赞 12 收藏

反馈

1 条解答

雪琪 Lv1

看起来SWC的配置可能还需要一些调整。虽然你设置了 jsc.target 为 es2020，但箭头函数的转换问题通常和 minify 配置也有关系。

首先检查你的 swcrc 文件里有没有设置 minify 选项，默认情况下 SWC 可能会对代码进行压缩优化，这会导致某些语法结构被改变。试着明确禁用 minify：

{

  "minify": false,

  "jsc": {

    "target": "es2020"

  }

}

另外，如果还在使用 transform 选项，记得把不必要的转换都去掉。比如有个插件可能会强制转成普通函数。确认下 transform 里有没有类似以下配置：

{

  "jsc": {

    "transform": {

      "react": {

        "runtime": "automatic" // 这个一般不需要改动

      }

    }

  }

}

最后再运行编译，应该就能保留箭头函数了。其实调试这个真挺头疼的，有时候一个小配置就影响全局。记得测试完编译结果，看看 this 绑定是不是正常了。

2026-03-25 21:01