《戰地》系列新作將於今年春季公佈 年底發售
什麼是 Babel?
官方的解釋 Babel 是一個 JavaScript 編譯器,用於將 ECMAScript 2015+ 版本的程式碼轉換為向後相容的 JavaScript 語法,以便能夠執行在當前版本和舊版本的瀏覽器或其他環境中。
通俗來講,Babel 是 Javascript 編譯器 ,將 ES6,ES7 ,ES8 轉換成 瀏覽器都支援的ES5 語法,並提供一些外掛來相容瀏覽器API的工具。
簡單說 Babel 的工作就是:
- 語法轉換
- 通過 Polyfill 的方式在目標環境中新增缺失的特性
- JS 原始碼轉換
Babel 的基本原理
原理很簡單,核心就是 AST (抽象語法樹)。首先將原始碼轉成抽象語法樹,然後對語法樹進行處理生成新的語法樹,最後將新語法樹生成新的 JS 程式碼,整個編譯過程可以分為 3 個階段 parsing (解析)、transforming (轉換)、generating (生成),都是在圍繞著 AST 去做文章,話不多說上圖:
Babel 只負責編譯新標準引入的新語法,比如 Arrow function、Class、ES Modul 等,它不會編譯原生物件新引入的方法和 API,比如 Array.includes,Map,Set 等,這些需要通過 Polyfill 來解決
組成
Babel 的核心是在 @babel/core 這個npm 包,圍繞在它周圍的分別是
@babel/core AST轉換的核心
@babel/cli 打包工具
@babel/plugin* Babel 外掛機制,Babel基礎功能不滿足的時候,手動新增些
@babel/preset-env 把許多 @babel/plugin 綜合了下,減少配置
@babel/polyfill 把瀏覽器某些不支援API,相容性程式碼全部匯入到專案,不管你是不是用到,缺點是程式碼體積特別大
@babel/runtime 把你使用到的瀏覽器某些不支援API,按需匯入,程式碼少
上面這些配置總得放在一個地方,.babelrc/babel.config.js 就是放這些配置地方,例如
{
"presets": [
["@babel/preset-env"]
],
"plugins": ["@babel/plugin-syntax-dynamic-import"],
]
}
參考:
Babel學習系列
對 babel polyfill 的一些理解
前端工程師的自我修養-關於 Babel 那些事兒
babel歸納總結