如何指定我的 Vue 项目的 ECMAScript 版本目标？

Question

我正在开发一个全新的 VUE 应用程序并想使用最新的 ES 功能，例如?? 等等

我在.eslintrc.js中开启了以下设置：

  parserOptions: {
    ecmaVersion: 12,
    parser: "babel-eslint"
  },

但是构建错误告诉我Syntax Error: Unexpected token ，
我猜这是某个地方的错误（babel？），但我搜索了互联网并没有看到问题，我如何升级我的 ES 版本？

我的 package.json：

{
  "name": "vuetify-admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lint:fix": "vue-cli-service lint --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
  "dependencies": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@vue/composition-api": "^1.0.0-beta.21",
    "core-js": "^3.6.5",
    "swrv": "^0.8.2",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuetify": "^2.2.11",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.3",
    "prettier": "^1.19.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-cli-plugin-vuetify": "~2.0.8",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  }
}

谢谢！

Answer 1

1. 通过 npm 安装必要的插件：

   npm i --save-dev @babel/plugin-proposal-nullish-coalescing-operator

2. 将插件添加到您的 babel.rc：

   "插件": [..., "@babel/plugin-proposal-nullish-coalescing-operator"]

您现在应该能够在项目中使用 Nullish Coalescing 运算符。