@babel/preset-env 没有转译可选链操作符？

设计师娇娇提问于 2026-03-10 18:37:18 阅读 2

工具

我用的是 Babel 7，配置了 @babel/preset-env，但代码里的可选链（?.）在打包后居然没被转译，低版本浏览器直接报错。我的 browserslist 配置明明包含了不支持这个语法的浏览器啊。

是不是 preset-env 默认不处理这些新语法？需要额外装什么插件吗？

const user = {};
const name = user?.profile?.name;
console.log(name);

Babel

我来解答赞 0 收藏

反馈

1 条解答

诸葛东焕 Lv1

这个问题很可能是 @babel/preset-env 版本太旧导致的。可选链的转译支持是在 7.12.0 版本才加入的。

先检查一下你的版本：

npm list @babel/preset-env

如果是旧版本，直接升级：

npm install @babel/preset-env@latest

另外确认一下你的 babel.config.js 或 .babelrc 配置，targets 要写清楚：

module.exports = {

  presets: [

    ['@babel/preset-env', {

      targets: {

        chrome: '80',  // 换成你需要的低版本

        firefox: '74',

        safari: '13',

        edge: '80'

      }

    }]

  ]

};

或者直接在 package.json 里配 browserslist，Babel 会自动读取：

{

  "browserslist": [

    ">0.2%",

    "not dead",

    "not op_mini all"

  ]

}

配置好之后跑一下 build，看打包结果里有没有类似 user == null ? void 0 : user.profile 这种降级代码，有的话就说明转译成功了。

如果升级到最新版本后还是不行，可以试试手动加插件：

npm install @babel/plugin-proposal-optional-chaining

然后在配置里加上：

plugins: ['@babel/plugin-proposal-optional-chaining']

不过正常情况下最新版 preset-env 就够了，不用额外加插件。

2026-03-10 19:03