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

所以这是因为babel在 Nuxt 中配置为支持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启用Optional Chaining(?.)和Nullish Coalescing(??)许多新的 ES 语法Vue.js SFC。

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+。