如何在Vue 2.6项目中使用es2020特性？

Question

我有一个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"
    }
  }
...
}

请帮忙！

- Loop

---

安装 @babel/plugin-proposal-optional-chaining 并没有什么帮助，因为这不影响它是否被使用。请参阅 https://cli.vuejs.org/config/#babel 和 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app#babelpreset-env 。我不会在默认的 Vue CLI 配置中遇到问题，所以问题可能特定于您的项目。 - Estus Flask

Answer 1

我不认为你能实现这个，除非你自己来实施。ES2020的可选链特性在Vue 3中可用，但在Vue 2.x中不可用。

更多信息可以在这里找到：More information can be found here 更新于20.07.2023：

根据下面的评论（@DMack）：

对于那些在2.7版本之后看到这个问题的人来说，这应该不是一个问题了。从2.7版本的发布说明中可以看到：[Vue 2.7]支持在模板表达式中使用ESNext语法。当使用构建系统时，编译后的模板渲染函数将通过与正常JavaScript配置的相同的加载器/插件进行处理。这意味着如果你已经为.js文件配置了Babel，它也将应用于你的SFC模板中的表达式。

- ulou

---

这是不正确的。该问题仅适用于Vue模板，因为它们与<script>部分编译方式不同。该问题明确列出了不属于模板的代码。 - Estus Flask

@ulou 非常感谢。我不知道模板是以不同的方式编译的。很有趣。 - Loop

@EstusFlask，你说得没错，HTML中呈现的代码有限制，但是OP有一些脚本，所以这并不重要。 - Tzahi Leh

对于在2.7版本之后遇到这个问题的任何人来说，现在应该不再是一个问题了。根据2.7版本的发布说明：[Vue 2.7]支持在模板表达式中使用ESNext语法。当使用构建系统时，编译后的模板渲染函数将通过与正常JavaScript配置的相同加载器/插件进行处理。这意味着如果你已经为.js文件配置了Babel，它也将适用于你的SFC模板中的表达式。 - DMack

Answer 2

在vue.config.js文件中，@Loop，请添加以下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()
 }
}

如果这对您有用，请告诉我。

- path

Answer 3

据我所知，这是因为Vue项目的标准设置使用Babel/Webpack将代码转译为可在浏览器中运行的内容（即Vue模板转换为渲染函数），并添加新功能的polyfill以实现向后兼容。Vue 2使用Babel 6/Webpack 4，而Vue 3则移至Babel 7/Webpack 5。 @vue/cli目前有一个beta版本，可以管理升级到Babel/Webpack，但可能需要您重写一些配置。

- Aweston

Answer 4

正如@aweston所提到的，这是由于Webpack引起的。

可选链不久前进入了Acorn, 而Webpack（依赖于它）仅在版本5（在@vue/cli版本5中可用，仍处于测试版）中支持它。

您也可以在Webpack版本4中使用它，但是要准备在项目中调整一些Babel（这并不困难！）

您应该进一步阅读此问题在github中确切地解决您的问题

- Tzahi Leh