使用Babel编译后，代码中let、const、箭头函数为何仍未被转换？

原因1：未安装配置基础转换预设 #

Babel 7及以上版本默认仅提供编译框架能力，不会主动做ES6+语法降级。你需要先安装@babel/preset-env这个官方预设，再写入Babel配置文件才能触发语法转换逻辑。

原因2：目标浏览器配置过高 #

若你已经配置了@babel/preset-env，但browserslist（或preset-env内的targets字段）设置的适配目标本身已经原生支持let、const、箭头函数等语法，Babel会跳过转换以避免生成冗余代码。比如适配目标设置为chrome >= 60时，上述ES6语法Chrome 60已全量支持，自然不会被转换。

原因3：未单独配置对应语法转换插件 #

如果你不想使用全量的preset-env，也可以单独安装对应语法的转换插件并写入配置：

• 转换let/const：安装@babel/plugin-transform-block-scoping
• 转换箭头函数：安装@babel/plugin-transform-arrow-functions

正确配置示例 #

以babel.config.json配置文件为例，设置适配低版本浏览器的规则：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11",
          "chrome": "40"
        }
      }
    ]
  ]
}

按照上述配置重新编译后，会得到降级后的代码：

"use strict";
var name = "Alex";
var age = 18;
var add = function (x, y) {
  return x + y;
};

内容的提问来源于stack exchange，提问作者刘嘉琪