[英]@babel/plugin-proposal-optional-chaining not working inside Vue.js <script> tag
In the vue/vuetify project, while trying to get optional chaining ( https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining ) to work, I always encounter an error:在 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
I have added @babel/plugin-proposal-optional-chaining
using the yarn add @babel/plugin-proposal-optional-chaining --dev
command我已经添加
@babel/plugin-proposal-optional-chaining
使用yarn add @babel/plugin-proposal-optional-chaining --dev
命令
In my App.vue I have this code, at created() :在我的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 })
My babel.config.js looks like this:我的 babel.config.js 看起来像这样:
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
node: "current",
},
},
],
],
plugins: ["@babel/plugin-proposal-optional-chaining"],
}
I'm using vue v.2.6.9.我正在使用 vue v.2.6.9。
Seems like after that setup everything should work just fine, the only similar issue I have found is this one: https://github.com/vuejs/vue-loader/issues/1697 , but here I am, actually using the Babel and not using TypeScript.似乎在设置之后一切正常,我发现的唯一类似问题是这个: https : //github.com/vuejs/vue-loader/issues/1697 ,但我在这里,实际上使用 Babel 和不使用 TypeScript。
You may have fixed this already, but I had the same issue and adding the babel configuration directly into webpack solved the issue for me.您可能已经解决了这个问题,但我遇到了同样的问题,将 babel 配置直接添加到 webpack 中为我解决了这个问题。 It's included in
@babel/preset-env
now so no need to install the plugin directly it seems.它现在包含在
@babel/preset-env
因此似乎不需要直接安装插件。
vue.config.js 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']
}
}
}
]
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.