如何让Babel将类转换输出为命名函数而非变量赋值形式？

嘿，这个问题我之前也折腾过，其实要实现这个效果，关键是调整Babel类转换插件的配置项，具体步骤如下：

核心配置思路 #

Babel默认把ES6类转换成var X = function X(...) { ... }这种变量赋值的函数表达式，要改成直接的function X(...) { ... }函数声明，需要给@babel/plugin-transform-classes插件开启loose模式。

具体配置方法 #

1. 单独配置类转换插件 #

如果你的项目里直接使用@babel/plugin-transform-classes，可以在Babel配置文件（比如.babelrc、babel.config.json或者package.json的babel字段）里这样写：

{
  "plugins": [
    ["@babel/plugin-transform-classes", { "loose": true }]
  ]
}

2. 结合@babel/preset-env使用 #

要是你用的是@babel/preset-env预设，推荐单独给类转换插件设置loose模式，避免影响其他插件的严格语义：

{
  "presets": [
    ["@babel/preset-env", {
      "loose": false,
      "targets": "defaults"
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-classes", { "loose": true }]
  ]
}

注意事项 #

开启loose模式后，Babel对类的转换会更贴近ES5的传统写法，但和严格的ES6类语义会有细微差异（比如静态属性的继承方式、super的处理逻辑）。如果你的代码依赖ES6类的严格特性，需要权衡是否使用这个选项；但如果只是单纯需要输出函数声明的形式，这个配置完全能满足需求。

亲测这个配置有效，你可以根据自己的项目场景调整试试～

内容的提问来源于stack exchange，提问作者OneOfOne