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可以直接作為依賴引入，不需要任何轉換
