关于babel配置使用可选链

最新推荐文章于 2024-07-19 10:53:52 发布
最新推荐文章于 2024-07-19 10:53:52 发布
阅读量4.2k 收藏 1
点赞数 1
文章标签： vue.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bxy_123456789/article/details/120176463
版权

什么是可选链

具体而言它是一种操作符（?.），MDN给出的官方解释是：允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。个人理解是：当不能确定对象中某个属性的时候，可以简化掉if-else的条件判断，使表达式更简明，同时也可以避免引起错误。

babel如何配置支持可选链

在项目中直接使用可选链语法会出现如下错误：

 

那么如何配置babel以致项目可以支持可选链呢？

1.npm或者yarn安装@babel/plugin-proposal-optional-chaining这个插件

  

2.在babel.config.js中配置

嘟嘟小码农
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js：可选链运算符（?.）和空值合并运算符（??）
彭世瑜的博客
11-04 319
是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。使用可选链运算符（?.）就可以很好的规避这个问题。假设有两个对象，数据而结构如下。获取嵌套对象的name属性。
Babel/Plugin -支持JS新语法[可选链操作符/空值合并操作符/空值合并操作符]
qq_35389653的博客
05-16 2567
最近在学习ES最新几个版本的新特性的时候发现 **?.**可选链操作符, **??**空值合并操作符, **??=**空值合并操作符等。 大致的演示一下用法： ?. 可选链操作符 var obj = { a: 1 }, obj.a // 1 obj.b // undefined obj.a.b // undefined obj.b.c // Error报错 obj?.b?.c // undefined // 允许我们深层的检索有没有该属性 ?? 空值合并运算符 // 当左侧的值为null和undef
vue小技巧: 升级Babel支持可选链和合并空值运算符
weixin_44395929的博客
04-14 5521
//从今天开始, 每天总结一个vue实际开发中的应用点(以下内容是个人认为的最佳实践, 如果有异议, 可以评论留言呐) //当然了, 留言我不一定改, 不留言我肯定不改 //重点内容我会加重字体, 可以提炼 一、babel 作用: (我偷懒了,直接用官网介绍) Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 据我所知, 无论是webpack项目还是vite项目都需要使用到babe
vue2项目中可选链报错
最新发布
weixin_45162984的博客
07-19 349
这是需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中。注意上面信息，错误来源是 node_modules/@open-wc模块下的文件。这个时候还需要在vue.config.js中添加如下配置,添加所有报错的模块。在babel.config.js中添加如下配置。这个时候还可能会报如下错误。这样就可以正常运行了。
ES的语法糖-babel的可选链和双问号语法
NurTuam—何永杰
08-02 3209
ES的语法糖-babel的可选链和双问号语法 前言 ES全称为ECMAScript，是JavasSript的一种语言标准。ECMAScript发布新语法规范需向TC39委员会提案，任何人都可以向其会提案。TC39由包括许多浏览器厂商在内的各方组成，提案需要经历五个阶段，每个阶段的变动都需要由TC39委员会批准(传送门：TC39)，如下： Stage 0: strawman——最初想法的提交。 Stage 1: proposal（提案）——由TC39至少一名成员倡导的正式提案文件，该文件包括API事例。 St
可选链
qq_17190231的博客
07-09 232
可选链就是有些对象是可选类型的，这时候用这个对象调用方法或者属性的时候如果强制解包会发生运行时错误。所以用可选？来调用。这样就是形成一个链式的调用。 class Person { var residence: Residence? } class Residence { var roomCount = 1 } let aPerson = Person() //aP...
js：可选链操作符?.和空值合并运算符??以及相关babel配置
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
07-03 1788
可选链 MDN 这个日常开发很常见，比如我们有一个嵌套对象： const obj = { a1: { a2: { a3: 'hello' } } } 我们想拿到 a3 就需要这么写，因为当 a1 或 a2 为空，就会报错 obj.a1 && obj.a1.a2 && obj.a1.a2.a3 有了可选链我们可以这么写： obj.a1 ?. a2 ?. a3 空值合并运算符 MDN 平时我们写空值判断会这么写： const name = 'zy' con
可选链操作符真香！！
Dear_Miriam的博客
07-13 362
可选链操作符真香
goddamn-javascript-babel：零配置包，可为您提供最新的Javascript，最新建议包括管道运算符foo |> bar，可选的链接foo？.bar，空合并foo ??。 酒吧等等
02-01
一个零配置包，为您提供最新的Javascript，最新建议包括管道运算符foo |> bar ，可选的链接foo?.bar ，null合并foo ?? bar foo ?? bar等等。 快速开始 以下是如何使用最新最出色的Babel提案创建项目的方法： $ ...
Babel常见配置及插件
weixin_28750673的博客
01-03 3942
Babel常见配置及插件 常用配置 @babel/preset-typescript ts预设插件，使用ts必装 // 配置 { "presets": [ "@babel/preset-typescript" ] } @babel/preset-env js预设插件，可以使用高版本js语法而不需要单独转换，根据babel和corejs polyfill语法映射进行转换 // 配置 { "presets": [ [ "@babel/preset-env",
可选链和双问号语法babel插件
qq_32615575的博客
10-30 4087
项目使用 目前vue3.0后的搭建可以直接使用可选链和双问号。旧项目的话需要借助插件解析可选链和双问号写法： babel-plugin-proposal-optional-chaining 插件可以帮助我们将可选链式的代码转化 1、 检查项目package.json的babel-core版本是否是7.x 升级babel 7，官方提供了一个工具babel-upgrade，对于已有的项目，只需要运行一行命令就可以升级到7版本以上了。 运行命令：npm babel-upgrade --write --
Babel/Plugin -JS支持ES6新语法[可选链操作符/空值合并操作符/空值合并操作符]
fly_666的博客
06-27 1031
Babel/Plugin -JS支持ES6新语法[可选链操作符/空值合并操作符/空值合并操作符]
可选链介绍
yzyblog的博客
08-13 2231
可选链 ?. 是一种 访问嵌套对象属性的防错误方法 。即使中间的属性不存在，也不会出现错误。 如果可选链 ?. 前面部分是 undefined 或者 null，它会停止运算并返回 undefined。 语法： obj?.prop obj?.[expr] arr?.[index] func?.(args) 复制代码 ** 我们改造前面示例代码： // 1. 对象中不存在指定属性 const leo = {}; console.log(leo?.name?.toString()); // unde
Vue进阶（幺陆肆）babel 配置文件详解
IT全栈 华强工作室
10-01 3726
项目开发阶段，使用可选链操作符?出现以下编译报错问题：分析：由于可选链操作符?是ES2020（即ES11）中推出的新语法，允许我们不需要校验当前属性的类型就可去尝试访问子属性。.b?.c;以上错误正是由于项目中无法解析可选链操作符等新的ES属性方法，如上图所示， 这时需要安装babel依赖,并添加到中。
Js 新特性:可选链
weixin_41987908的博客
12-07 495
js新特性可选链
Vue项目中支持可选链（链判断运算符）操作
在路上`的博客
03-29 2154
【代码】Vue项目中支持可选链（链判断运算符）操作。
前端配置 可选链 + 双问号 语法糖
fth1002853070的博客
03-02 275
示例代码。
babel6使用ES2020最新js语法
前端蜗牛君
10-19 1658
Babel 6 原本是不支持 ES2020 语法，因为它是在 Babel 7 中引入的。如果您想使用 ES2020 语法，您需要将 Babel 6 升级到 Babel 7 或更高版本(推荐),当然也可以在bebel6中安装支持某个语法的plugin,比如你想使用 ES2020 中的可选链操作符,就要配置使用。
vue可选链操作符报错
07-28
可选链操作符在Vue项目中使用时可能会导致编译报错。这是因为Vue默认不支持可选链操作符。要解决这个问题，你需要安装babel依赖@babel/plugin-proposal-optional-chaining，并在babel.config.js中进行配置。 首先，你需要安装@babel/plugin-proposal-optional-chaining依赖。可以使用以下命令进行安装： ``` npm install --save-dev @babel/plugin-proposal-optional-chaining ``` 然后，在babel.config.js文件中添加以下配置： ```javascript module.exports = { presets: \['@vue/app'\], plugins: \["@babel/plugin-proposal-optional-chaining"\] } ``` 这样配置后，Vue项目就可以正常使用可选链操作符了。如果你还想使用空值合并操作符，可以在plugins中再添加"@babel/plugin-proposal-nullish-coalescing-operator"配置。 请注意，以上配置是基于Vue CLI创建的项目。如果你是手动配置的项目，可能需要进行一些额外的配置。 引用\[1\] \[2\] \[3\] #### 引用[.reference_title] - *1* [解决：vue项目构建出现可选链?:操作符解析失败](https://blog.csdn.net/qq_38969618/article/details/125409546)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue-使用可选链操作符编译报错问题](https://blog.csdn.net/qq_42164957/article/details/127258232)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue项目启动出现可选链?:操作符解析失败](https://blog.csdn.net/michiko98/article/details/130732784)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值