主要观点总结
本文介绍了如何开发一个Babel插件，在打包时自动为代码添加可选链运算符（?.），以提升JS项目的健壮性和稳定性，避免TypeError的发生。
关键观点总结
关键观点1: 背景介绍
介绍可选链运算符（?.）的作用和在JS项目中的意义。
关键观点2: 项目需求
在维护的代码中可能存在TypeError隐患，数量大维护成本高，需要自动为代码添加可选链运算符（?.）解决这些问题。
关键观点3: 解决方案
开发一个Babel插件，在打包时进行代码转换，将存在隐患的操作符转换为可选链运算符（?.）。
关键观点4: 插件功能
识别代码中可能存在TypeError的风险操作，支持自定义Babel参数配置，包括短路表达式的优化等。
关键观点5: 插件应用
配置babel.config.js文件，支持3个配置项：includes、excludes和optimizer。
关键观点6: 不足之处
自动为代码添加?.可能会导致打包后文件体积略微增加，从而影响页面访问速度。
关键观点7: 相关插件
对于不支持可选链运算符（?.）的浏览器或版本，可以使用@babel/plugin-transform-optional-chaining插件做反向降级。
关键观点8: 插件测试
提供了一些测试用例，使用babel-plugin-tester进行测试。
关键观点9: 参考资料
提供了相关的参考资料和链接。
文章预览
前言 介绍了如何通过开发 Babel 插件，自动在打包时为 JavaScript 代码添加可选链运算符？.，以有效避免 TypeError 错误的发生。今日前端早读课文章由 @Sun Maobin 分享，公号：vivo 互联网技术授权。 正文从这开始～～ 通过开发 Babel 插件，打包时自动为代码添加 可选链运算符 ( ?. )，从而有效避免 TypeError 的发生。 一、背景介绍 在 JS 中当获取引用对象为空值的属性时，程序会立即终止运行并报错：TypeError: Cannot read properties of ... 在 ECMAScript 2020 新增的 可选链运算符 ( ?. )，当属性值不存在时返回 undefined，从而可有效避免该错误的发生。 let a a . b . c . d // Uncaught TypeError: Cannot read properties of undefined (reading 'b') a ?. b ?. c ?. d // undefined 本文将分享如何借助这一特性开发 Babel 插件 ，自动为代码添加 ?. ，从而根治系统中的 TypeError 错误。 【第2372期】Ja
………………………………
