babel原理（babel+polyfill）

babel：
https://zhuanlan.zhihu.com/p/85915575
https://www.cnblogs.com/75115926/p/12627009.html
polyfill：
https://zhuanlan.zhihu.com/p/71640183
chatgpt

babel是一个转译器，它只是把同种语言的高版本规则翻译成低版本规则
主要分为三个阶段

• 解析：将代码字符串解析成抽象语法树（AST）
• 转换：对抽象语法树进行转换操作（使用插件，添加、删除、修改AST节点），得到新的抽象语法树
• 再建：根据变换后的抽象语法树再生成代码字符串

babel只是转译新标准引入的语法，比如ES6的箭头函数转译成ES5的函数；而新标准引入的新的原生对象，部分原生对象新增的原型方法，新增的API等（如Proxy、Set等），这些babel是不会转译的。需要用户自行引入polyfill来解决

Polyfill（补丁）解决上面，新标准引入的新的原生对象，部分原生对象新增的原型方法，新增的API等（如Proxy、Set等）

babel 最重要的包（其实由多个npm包组成，但下面的更重要）

• @babel/core： babel的核心包，包含了babel的转换引擎、插件管理器、AST等，是使用babel的必备包
• @babel/preset-env： bable的预设包，提供了对不同js版本的支持，可以通过配置自动转换js版本
• babel-loader： webpack中使用的babel插件，用于在webpack构建时自动转换js代码，常用语构建react程序

babel 常用的插件

• @babel/plugin-transform-arrow-functions：将es6箭头函数转化为传统函数
• @babel/preset-react：用于支持react应用程序的预设包，提供了jsx转换功能
• @babel/polyfill：提供ES6+特性的垫片，可以在不支持这些特性的环境中使用
• @babel/runtime：提供了运行时辅助库，支持babel转换的代码在不同环境中运行

在入口处导入polyfill，因为polyfill代码需要在所有其他代码前先被调用

polyfill和runtime区别

• 作用范围不同。runtime是在代码转换时使用，包含了运行时辅助函数，帮助转换后的代码在不同环境中运行，polyfill在运行时使用，包含了一些垫片，在不支持es6+语法的环境中，模拟这些语法
• 体积不同。runtime更轻量级！！！它包含了转换后代码所需的辅助函数，而polyfill包含了整个es6+语法的实现
• 使用方式不同。runtime需要借助babel转换功能，通过在代码中插入转换后的辅助函数，实现功能，polyfill可以直接作为依赖引入，不需要任何转换