【操作符 ?. 、?? 、 ??=报错】

问题描述

在项目中使用可选链操作符( ?. )、空值合并操作符（ ?? ）、空赋值运算符（??=） 等新语法特性时出现报错

---

原因分析：

ECMAScript 的提案，当前的 JavaScript 运行环境不支持这些特性。

---

解决方案：

1. 添加babel插件

 package.json:
 	"@babel/plugin-proposal-nullish-coalescing-operator": "^7.17.12", 
    "@babel/plugin-proposal-optional-chaining": "^7.17.12", 

2.babel.config.js中配置使用插件

plugins: [ 
   '@babel/plugin-proposal-optional-chaining', 
   '@babel/plugin-proposal-nullish-coalescing-operator', 
] 

解析

Babel 插件是用于将新版本 JavaScript 代码转换为向后兼容的旧版本 JavaScript 代码的工具。它们通过 Babel 转换器来实现这种转换。当你使用 Babel 插件来处理特定语法或提案时，插件会对代码进行分析，并根据规则和配置将特定的语法转换为兼容性更好的代码

转换过程

解析（Parsing）： Babel 首先会将 JavaScript 代码解析成抽象语法树（AST），这是一种将代码转换为树状结构的方式，更方便分析和处理代码。

转换（Transformation）： 插件根据特定的语法或提案规则，检查 AST 中的节点，找到匹配的语法模式，并对其进行转换。这个过程可能包括添加、修改、删除或替换 AST 节点，以将新的语法转换为旧版本 JavaScript。

生成（Code Generation）： 经过转换后，Babel 将修改后的 AST 重新转换为字符串形式的 JavaScript 代码。