vue 2.6项目中如何使用es2020特性？答案

【问题标题】：How to use es2020 features in vue 2.6 project?vue 2.6项目中如何使用es2020特性？
【发布时间】：2021-07-20 17:46:39
【问题描述】：

我有一个 Vue 2.6 项目，我想在我的项目中使用 es2020 特性，例如可选链接，但我无法让它在我的项目中工作。我收到以下错误。

> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                           12:59:10

 error  in ./src/components/list/columns/lastUpdate.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (15:20)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       if (!this.data.ObjInst || !this.data.ObjInst.Last_Update) return '';
| 
>       if (this.data?.ObjInst) {
|         console.log("Hello");
|       }

 @ ./src/components/list/columns/lastUpdate.vue?vue&type=script&lang=js& 1:0-349 1:365-368 1:370-716 1:370-716
 .
 .
 .
 .
 .
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.21:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我已经安装了 babel 插件，但我得到了同样的错误。

npm install --save-dev @babel/plugin-proposal-optional-chaining

我一直在谷歌上搜索，但我没有找到任何有关它的信息。

这些是我项目的依赖项

{
...
  "dependencies": {
    "core-js": "^2.6.11",
    "jwt-decode": "^2.2.0",
    "vue": "^2.6.12",
    "vue-i18n": "^8.24.2",
    "vue-multiselect": "^2.1.6",
    "vue2-admin-lte": "^0.4.3",
    "vue2-daterange-picker": "^0.6.1"
  },
  "devDependencies": {
    "@kazupon/vue-i18n-loader": "^0.3.0",
    "@vue/cli-plugin-babel": "^3.12.1",
    "@vue/cli-plugin-eslint": "^3.12.1",
    "@vue/cli-service": "^3.12.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-i18n": "^0.6.1",
    "vue-template-compiler": "^2.6.12"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }
...
}

请帮帮我！

【问题讨论】：

安装@babel/plugin-proposal-optional-chaining 没有任何帮助，因为这不会影响它是否被使用。请参阅 cli.vuejs.org/config/#babel 和 github.com/vuejs/vue-cli/tree/dev/packages/%40vue/… 。我不认为默认的 Vue CLI 配置会出现问题，因此问题可能特定于您的项目。

标签： javascript vue.js ecmascript-2020

【解决方案1】：

我不认为你可以实现它，除非你自己实现它。 Vue 3 中提供了 ES2020 的这种可选链接功能，但 Vue 2.x 中没有。

More information can be found here

【讨论】：

这不是真的。该问题仅适用于 Vue 模板，因为它们的编译方式与 <script> 部分不同。该问题明确列出了不属于模板的代码。
@ulou 非常感谢。我不知道模板是以不同的方式编译的。很有趣。
@EstusFlask，你说得对，在 HTML 中呈现的代码是有限的，但是 OP 有一些脚本，所以它是无关紧要的

【解决方案2】：

据我了解，这是因为 Vue 项目的标准设置使用 Babel/Webpack 将代码转换为可以在浏览器中运行的东西（即 Vue 模板来呈现函数）并为向后的新功能添加 polyfill兼容性。 Vue 2 使用 Babel 6/Webpack 4，他们在 Vue 3 中迁移到 Babel 7/Webpack 5。

@vue/cli 目前有一个测试版，用于管理 Babel/Webpack 的升级，但它可能需要你重写一些配置。

【讨论】：

【解决方案3】：

正如@awston 提到的，这是因为 Webpack。

不久前输入的可选链to Acorn，并且Webpack（依赖于它）仅从版本开始支持它。 5（在 @vue/cli 版本 5 中可用，仍处于测试阶段）。

你可以在 webpack 版本中使用它。 4 也是如此，但要准备好在你的项目中调整一些 babel（这并不难！）

您应该进一步阅读 github 中的 this issue 来准确分配您的问题

【讨论】：

【解决方案4】：

@Loop，在 vue.config.js 文件中添加如下 webpack 对象（chainedWebpack）：

module.exports = {  
 chainWebpack: config => {
  config.module
  .rule('vue')
  .test(/\.vue$/)
  .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
      // modify the options...
      return options
    })
  .end()
  .use('vue-style-loader')
  .loader('vue-style-loader')
  .end()
 }
}

如果它适合你，请告诉我。

【讨论】：