## 一、概述 ***Babel 是一個 JavaScript 編譯器***； 它是一個工具鏈，主要用于**將 ECMAScript 2015+ 版本的代碼轉換為向后兼容的 JavaScript 語法**，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。 ## 二、實例  ## 三、應用 基于新版ES編程，考慮兼容性，編譯為老版本js代碼； 所以，對應js編程，只要Babel支持的特性，即使當前標準不支持，都可以使用，Babel可以把它編譯成瀏覽器支持的版本； ## 四、插件體系 Babel 構建在插件之上。使用現有的或者自己編寫的插件可以組成一個轉換管道。通過使用或創建一個preset即可輕松使用一組插件； Babel 是一個編譯器（輸入源碼 => 輸出編譯后的代碼）。就像其他編譯器一樣，編譯過程分為三個階段：解析、轉換和生成。 babel 本身不具有任何轉化功能，它把轉化的功能都分解到一個個 plugin 里面。因此當我們不配置任何插件時，經過 babel 的代碼和輸入是相同的。 插件總共分為兩種： 1、當我們添加**語法插件**之后，在解析這一步就使得 babel 能夠解析更多的語法。(順帶一提，babel 內部使用的解析類庫叫做 babylon，并非 babel 自行開發)； 2、當我們添加**轉譯插件**之后，在轉換這一步把源碼轉換并輸出。這也是我們使用 babel 最本質的需求。 ## 五、使用方法 既然插件是 babel 的根本，那如何使用呢？總共分為 2 個步驟： 1. 將插件的名字增加到配置文件中 (根目錄下創建 .babelrc 或者 package.json 的`babel`里面，格式相同) 2. 使用`npm install babel-plugin-xxx`進行安裝 ## 六、preset 比如 es2015 是一套規范，包含大概十幾二十個轉譯插件。如果每次要開發者一個個添加并安裝，配置文件很長不說，`npm install`的時間也會很長，更不談我們可能還要同時使用其他規范呢。 為了解決這個問題，babel 還提供了一組插件的集合。因為常用，所以不必重復定義 & 安裝。(單點和套餐的差別，套餐省下了巨多的時間和配置的精力) preset 分為以下幾種： * 官方內容，目前包括 env, react, flow, minify 等。這里最重要的是 env，后面會詳細介紹。 * stage-x，這里面包含的都是當年最新規范的草案，每年更新。 這里面還細分為 * Stage 0 - 稻草人: 只是一個想法，經過 TC39 成員提出即可。 * Stage 1 - 提案: 初步嘗試。 * Stage 2 - 初稿: 完成初步規范。 * Stage 3 - 候選: 完成規范和瀏覽器初步實現。 * Stage 4 - 完成: 將被添加到下一年度發布。 ## 七、執行順序 * Plugin 會運行在 Preset 之前。 * Plugin 會從前到后順序執行。 * Preset 的順序則**剛好相反**(從后向前)。