Nuxt：使用`可选的链接运算符`运算符（。？）

Question

Nuxt 2.12.2尝试使用object?.key时在构建上引发错误。

Module parse failed: Unexpected token (311:25)                                                                                                                                                 friendly-errors 10:36:40
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

因此，因为Nuxt中的babel配置为支持我的项目中不需要的较旧的浏览器，例如IE9。

在另一个项目中，我只输入了.bablelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

但是在Nuxt .bablelrc中被禁用。那么如何使optional chaining operator工作呢？

通过告诉Nuxt仅支持现代浏览器。或添加了@babel/plugin-proposal-optional-chaining

Answer 1

如Nuxtjs Doc所述，默认情况下将忽略.babelrc。

我通过以下配置解决了这个问题。

// in nuxt.config.js
{
  // ...
  build: {
    // ....
    babel: {
      plugins: [
        '@babel/plugin-proposal-optional-chaining'
      ]
    }
  }
}

当然，在此之前，您应该安装@babel/plugin-proposal-optional-chaining

npm i -D @babel/plugin-proposal-optional-chaining

希望对您有帮助。