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

Posted 2023-02-22

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

【英文标题】：@babel/plugin-proposal-optional-chaining not working inside Vue.js <script> tag

【发布时间】：2021-04-02 06:13:00

【问题描述】：

在 vue/vuetify 项目中，在尝试使可选链 (https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) 工作时，我总是遇到错误：

./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

我使用yarn add @babel/plugin-proposal-optional-chaining --dev 命令添加了@babel/plugin-proposal-optional-chaining

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

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


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

console.log( baz, safe )

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

module.exports = 
    presets: [
        [
            "@babel/preset-env",
            
                targets: 
                    node: "current",
                ,
            ,
        ],
    ],
    plugins: ["@babel/plugin-proposal-optional-chaining"],

我正在使用 vue v.2.6.9。

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

【参考方案1】：

您可能已经解决了这个问题，但我遇到了同样的问题，将 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']
            
          
        
      ]
    
  ,