@babel/插件提案-可选-链接在 Vue.js 标签中不起作用<script>

Question

在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 2.6.9版本。

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

Answer 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']
}
}
}
]
}
},