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

我希望它对你有帮助。

Answer 2

试试vue-template-babel-compiler

它使用Babel为Vue.js SFC启用Optional Chaining(?.) 、 Nullish Coalescing(??)和许多新的 ES 语法。

Github 回购：vue-template-babel-compiler

演示

用法

1.安装

npm install vue-template-babel-compiler --save-dev

2. 配置

1.Vue-CLI

Vue-CLI 的 DEMO 项目

2. Nuxt.js

Nuxt.js 的演示项目

// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      vue: {
        compiler: require('vue-template-babel-compiler')
      }
    },
  },
  // ...
}

详细使用请参考 REAMDE

支持Vue-CLI, Nuxt.js, Webpack ，任何环境使用vue-loader v15+ 。