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