@babel/plugin-proposal-optional-chaining 在 Vue.js <script> 标签中不起作用

问题描述

在 vue/vuetify 项目中，在尝试让可选链（https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining）起作用时，总是遇到错误：

protected static function boot()
{
    parent::boot();

    static::created(function ($screenshot) {
        $screenshot->update(
            ['CollectionID' => $screenshot->id)]
        );
    });
}

我已使用 ./src/App.vue?vue&type=script&lang=ts& (./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=ts&) 155:24 Module parse Failed: Unexpected token (155:24) 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 baz = obj?.foo?.bar?.baz // 42 | | const safe = obj?.qux?.baz // undefined 命令添加了 @babel/plugin-proposal-optional-chaining

在我的 App.vue 我有这个代码，created()：

yarn add @babel/plugin-proposal-optional-chaining --dev

我的 babel.config.js 看起来像这样：

const obj = {
  foo: {
    bar: {
      baz: 42,},}

const baz = obj?.foo?.bar?.baz // 42
const safe = obj?.qux?.baz // undefined

console.log({ baz,safe })

我使用的是 vue v.2.6.9。

似乎在设置之后一切正常，我发现的唯一类似问题是：https://github.com/vuejs/vue-loader/issues/1697，但我在这里，实际上使用的是 Babel 而不是使用 TypeScript。

解决方法

您可能已经解决了这个问题，但我遇到了同样的问题，将 babel 配置直接添加到 webpack 中为我解决了这个问题。它现在包含在 @babel/preset-env 中，因此似乎不需要直接安装插件。

vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {
            loader: 'babel-loader',options: {
              presets: ["@vue/app",'@babel/preset-env']
            }
          }
        }
      ]
    }
  },