Parcel 2.12.0无.babelrc时无法转译ES6至ES5的问题求助

问题根源 #

Parcel 2本身已内置@parcel/babel-preset-env预设，无需手动重复配置——这就是你用babel.config.json指定该预设时出现冗余警告的原因。而.babelrc作为文件级配置，Parcel 2对其处理逻辑与项目级的babel.config.json不同，会导致配置不生效、转译失败。删除配置后，Parcel默认针对现代浏览器打包，自然输出未转译的ES6代码。

正确解决方案 #

不需要手动指定Parcel内置的Babel预设，只需通过配置目标环境让Parcel自动完成转译，有三种方式可选：

方式1：用babel.config.json配置目标环境

删除旧的.babelrc或冗余的babel.config.json，新建babel.config.json文件，仅配置需要兼容的目标浏览器：

{
  "targets": {
    "ie": "11",
    "chrome": "58",
    "firefox": "54"
  }
}

根据实际兼容需求调整targets字段即可，Parcel会自动调用内置预设完成ES6到ES5的转译，且不会出现冗余警告。

方式2：用package.json的browserslist配置

在项目根目录的package.json中添加browserslist字段，指定目标环境：

{
  "browserslist": [
    "ie 11",
    "chrome >= 58",
    "firefox >= 54"
  ]
}

这种方式无需单独创建Babel配置文件，Parcel会自动读取该配置并处理转译。

方式3：命令行临时指定目标

打包时直接通过命令行参数指定目标环境，比如兼容IE11：

parcel build src/index.js --targets ie11

适合临时调整兼容目标，无需修改配置文件。

验证转译结果 #

运行Parcel打包命令后，检查输出目录（默认是dist）下的JS文件：

• 箭头函数const greeting = () => {}会被转译为var greeting = function() {}
• Class的实例属性greeting = "Hey"会被处理为构造函数内的赋值逻辑
• 模板字符串${this.greeting}, ${this.firstName}会被转译为字符串拼接

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