>[success] # 出現的背景 ~~~ 1.JavaScript每年都有新功能出現，但是使用JS的瀏覽器卻并不是及時同步更新的。同時， 用戶也不會經常更新瀏覽器版本。所以，如果我們需要使用一些JS新功能時，就必須將 新功能的JS代碼轉換為大部分現代瀏覽器能運行的JS版本。相對的每年js更新可以分為兩個版本 '語法層面'和'api層面'，要將ES6+的JS代碼轉換為ES5代碼。因此語言特性的降級成為剛需。 ~~~ >[success] # '語法' + 'api' ~~~ 1.js 構成部分可以簡單理解成'語法' + 'api',在隨著es每年更新也增加了很多對應新的'語法' 和 'api' 1.1.語法類型常見的'const', 'let'這類 1.2.'api' 例如'Set'、'Map' 等 2.對應的為了可以在一些不支持的環境去使用這類'語法' 和'api' js的社區大神們也給出一些方案 2.1.'語法'可以通過一些js 編譯器，將js語法解析'AST語法樹'并且，當我們拿到'ast語法樹'的時候 可以對相應的節點做替換，做到語法轉換， 如果你看過本冊的 'eslint' 章節你將知道常見對js 轉換ast 語法幾個編譯器解析器： 'esprima'、'espree'、'babel-eslint'、'@babel/eslint-parser'、'@typescript-eslint/parser' 以'babel' 為例注意他只是一個js編譯器用來轉換'ast 語法樹的' 當編寫代碼 'const a = 1' 可能某些運行的 瀏覽器環境對其'const' 語法不支持，將其通過編譯器轉成'ast語法樹' 這里還是以'babel' 為例如圖,注意 'babel'作為解釋器目前僅僅是幫我們對其代碼解析語法樹的 2.2.'api' 和'語法'不同，'api' 是一套完整的方法將某些東西經行處理，例如數組的'concat'他明確是一個處理數組 的方法，和眾多第三方解決方式理解思路相同,我們需要引入具備這些功能的api 包，這種包含js 新api 包叫做 'polyfill(墊片/補丁)',常見的這類庫例如'es5-shim 、es6-shim、 core-js ' ~~~ * 語法樹[生成地址鏈接](https://astexplorer.net/)  >[info] ## core.js && babel ~~~ 1.因此'core.js' 和 'babel' 是兩件東西 1.1.Babel 官方的介紹'Babel is a JavaScript compiler'也就是說'Babel 其實就是一個 JavaScript 的編譯器' 1.2.'core.js' 它是JavaScript標準庫的 polyfill 2.core-js 又和 Babel 深度綁定，二者其實是兩個東西，但又相互彼此的支持可以應用在一起 ~~~ >[info] ## 工具網站 https://esprima.org/demo/parse.html https://astexplorer.net/