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

babel是一個(gè)轉(zhuǎn)譯器，它只是把同種語(yǔ)言的高版本規(guī)則翻譯成低版本規(guī)則
主要分為三個(gè)階段

• 解析：將代碼字符串解析成抽象語(yǔ)法樹(shù)（AST）
• 轉(zhuǎn)換：對(duì)抽象語(yǔ)法樹(shù)進(jìn)行轉(zhuǎn)換操作（使用插件，添加、刪除、修改AST節(jié)點(diǎn)），得到新的抽象語(yǔ)法樹(shù)
• 再建：根據(jù)變換后的抽象語(yǔ)法樹(shù)再生成代碼字符串

babel只是轉(zhuǎn)譯新標(biāo)準(zhǔn)引入的語(yǔ)法，比如ES6的箭頭函數(shù)轉(zhuǎn)譯成ES5的函數(shù)；而新標(biāo)準(zhǔn)引入的新的原生對(duì)象，部分原生對(duì)象新增的原型方法，新增的API等（如Proxy、Set等），這些babel是不會(huì)轉(zhuǎn)譯的。需要用戶自行引入polyfill來(lái)解決

Polyfill（補(bǔ)丁）解決上面，新標(biāo)準(zhǔn)引入的新的原生對(duì)象，部分原生對(duì)象新增的原型方法，新增的API等（如Proxy、Set等）

babel 最重要的包（其實(shí)由多個(gè)npm包組成，但下面的更重要）

• @babel/core： babel的核心包，包含了babel的轉(zhuǎn)換引擎、插件管理器、AST等，是使用babel的必備包
• @babel/preset-env： bable的預(yù)設(shè)包，提供了對(duì)不同js版本的支持，可以通過(guò)配置自動(dòng)轉(zhuǎn)換js版本
• babel-loader： webpack中使用的babel插件，用于在webpack構(gòu)建時(shí)自動(dòng)轉(zhuǎn)換js代碼，常用語(yǔ)構(gòu)建react程序

babel 常用的插件

• @babel/plugin-transform-arrow-functions：將es6箭頭函數(shù)轉(zhuǎn)化為傳統(tǒng)函數(shù)
• @babel/preset-react：用于支持react應(yīng)用程序的預(yù)設(shè)包，提供了jsx轉(zhuǎn)換功能
• @babel/polyfill：提供ES6+特性的墊片，可以在不支持這些特性的環(huán)境中使用
• @babel/runtime：提供了運(yùn)行時(shí)輔助庫(kù)，支持babel轉(zhuǎn)換的代碼在不同環(huán)境中運(yùn)行

在入口處導(dǎo)入polyfill，因?yàn)閜olyfill代碼需要在所有其他代碼前先被調(diào)用

polyfill和runtime區(qū)別

• 作用范圍不同。runtime是在代碼轉(zhuǎn)換時(shí)使用，包含了運(yùn)行時(shí)輔助函數(shù)，幫助轉(zhuǎn)換后的代碼在不同環(huán)境中運(yùn)行，polyfill在運(yùn)行時(shí)使用，包含了一些墊片，在不支持es6+語(yǔ)法的環(huán)境中，模擬這些語(yǔ)法
• 體積不同。runtime更輕量級(jí)！！！它包含了轉(zhuǎn)換后代碼所需的輔助函數(shù)，而polyfill包含了整個(gè)es6+語(yǔ)法的實(shí)現(xiàn)
• 使用方式不同。runtime需要借助babel轉(zhuǎn)換功能，通過(guò)在代碼中插入轉(zhuǎn)換后的輔助函數(shù)，實(shí)現(xiàn)功能，polyfill可以直接作為依賴引入，不需要任何轉(zhuǎn)換