在 Node 14/Vue2.js 中使用可选链接语法时出现错误（意外令牌）

Question

可选链接在 Node 14.17 上的 Vue.js (v2) 项目中不起作用。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

我收到以下错误：

 ERROR  Failed to compile with 1 error                                                                                                                                                                                                                                                                              11:04:50
 error  in ./src/components/Thing.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (497:39)
File was processed with these loaders:
 * ./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.  
|             }
|         };
>         const dogName = adventurer.dog?.name;
|         console.log(dogName);
|         // expected output: undefined

 @ ./src/components/Thing.vue
 @ ./src/components/xx-thing.vue?vue&type=script&lang=js&
 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&
 @ ./src/views/Home.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.16.8.210:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我有预感它可能与以下之一有关。我也安装了 Babel 7，但也许该项目仍然使用 6，因为 Babel 模块名称显然已更改。但我不知道如何检查，或者如何将其切换到 7，即使这可以在不破坏 Vue 项目的情况下完成 - 也许它与此无关..

node -v
v14.17.6

npm ls webpack
webpack@4.46.0

npm ls @babel/core
7.15.5 (=latest)

npm ls @vue/cli-plugin-babel
4.5.13 (=latest)

npm ls @babel/plugin-proposal-optional-chaining
7.14.5 (=latest)

vue info

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
  Binaries:
    Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 92.0.4515.131
    Edge: Spartan (44.18362.1474.0)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.7
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  3.12.1
    @vue/cli-plugin-babel: ^4.5.13 => 4.5.13
    @vue/cli-plugin-eslint: ^3.11.0 => 3.12.1
    @vue/cli-plugin-pwa: ^4.2.3 => 4.5.13
    @vue/cli-service: ^3.11.0 => 3.12.1
    @vue/cli-shared-utils:  3.12.1 (4.5.13)
    @vue/cli-upgrade: ^3.12.1 => 3.12.1
    @vue/component-compiler-utils:  3.2.2
    @vue/preload-webpack-plugin:  1.1.2
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.4.0 => 7.17.0 (4.7.1)
    vue: ^2.6.10 => 2.6.14
    vue-cli-plugin-vuetify: ^0.6.3 => 0.6.3
    vue-eslint-parser:  7.11.0 (2.0.3)
    vue-force-next-tick: ^1.1.0 => 1.1.0
    vue-head: ^2.2.0 => 2.2.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.8
    vue-meta: ^2.3.2 => 2.4.0
    vue-router: ^3.0.3 => 3.5.2
    vue-sse: ^1.0.2 => 1.1.1
    vue-style-loader:  4.1.3
    vue-template-compiler: ^2.6.10 => 2.6.14
    vue-template-es2015-compiler:  1.9.1
    vue-the-mask:  0.11.1
    vuedraggable:  2.24.3
    vuetify: ^2.5.8 => 2.5.8
    vuetify-form-base: ^0.3.2 => 0.3.3
    vuetify-loader: ^1.4.3 => 1.7.3
  npmGlobalPackages:
    @vue/cli: Not Found

我也尝试添加plugins: ["@babel/plugin-proposal-optional-chaining"],到 babel.config.js

我也尝试卸载 babel 6，但 npm 卸载程序无法真正卸载它。

可能有类似的根本原因（不幸的是尚未解决）： 可选链在 Node 14 LTS 中不起作用？

Answer 1

原因

这是因为 Vue 2使用 webpack 4。Webpack 4使用的是 Acorn 6。然而直到版本 7.2.0才在 Acorn 中实现对可选链接的支持。

解决方案

要使用可选链接和其他新功能，您将需要使用 Babel。此功能在 中可用@babel/plugin-proposal-optional-chaining，它也包含在ECMA-262 /中@babel/preset-env，或者专门用于 Vue 应用程序：仅@vue/app.

如果您还没有这样做，您将需要vue add @vue/cli-plugin-babel. 然后只需使用有效的预设更新您的 Babel 配置，例如

"babel": {
  "presets": [
    "@vue/app"
  ]
}

更详细的指南可以在这里找到。

重新启动开发服务器/重建应用程序，可选链接现在应该可以工作了:)