## 前言 本文主要描述babel的相關知識，節選于官網和一些較好的文章。 ## 官網 官網地址：[https://babeljs.io/](https://babeljs.io/) ## 了解 ### 基本作用 * 轉化語法（不同的js語言版本） * 目標環境中缺少的Polyfill功能 * 源碼轉換 ### 支持jsx ，可以轉換其對應的語法 ### 可插拔 以插件的形式進行，方便靈活的配置 ### ## 使用方式 - 單體js文件 - 命令行 cli - 構建工具的插件（webpack 的 babel-loader, rollup 的 rollup-plugin-babel） 其中二三種常見，第二種一般常見于package.json文件中的命令行配置，第三種常見于webpack的配置文件。 ## 運行方式和插件 ### 運行階段 babel 總共分為三個階段：解析，轉換，生成。 **說明：** babel 本身不具有任何轉化功能，它把轉化的功能都分解到一個個 plugin 里面。因此當我們不配置任何插件時，經過 babel 的代碼和輸入是相同的。 > 而插件總共分為兩種：語法插件和轉義插件。 ### 語法插件 當我們添加 語法插件 之后，在解析這一步就使得 babel 能夠解析更多的語法。(ps:babel 內部試用的解析類庫叫做 babylon，并非 babel 自行開發)。也就是說當你需要支持某種語法寫法的時候，就需要增加其對應的插件。 ### 轉譯插件 當我們添加 轉譯插件 之后，在轉換這一步把源碼轉換并輸出。這也是我們使用 babel 最本質的需求。比起語法插件，轉譯插件其實更好理解，比如箭頭函數 (a) => a 就會轉化為 function (a) {return a}。完成這個工作的插件叫做 babel-plugin-transform-es2015-arrow-functions。 ### 兩種插件關系 同一類語法可能同時存在語法插件版本和轉譯插件版本。如果我們使用了轉譯插件，就不用再使用語法插件了。 ## 配置文件 插件基本是通過配置的方式進行使用的，分為兩個步驟： - 將插件的名字增加到配置文件中 (根目錄下創建 .babelrc 或者 package.json 的 babel 里面，格式相同) - 使用 npm install babel-plugin-xxx 進行安裝 ``` // .babelrc or babel-loader option 示例的代碼 { "plugins": [ ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 會加載 less 文件 ] } ``` ## preset（插件配置的優化方案） 那么雖然有一系列的插件，但是手動配置一系列的插件工作量非常大，也不方便記憶，所以可以簡單的通過preset來進行配置，他是一個插件的集合體，通過配置preset可以快速的得到對應的需要的系列插件。 目前官網出的配置有：env, react, flow, minify，其中最重要的是env，我們一般設置的也是env. > stage-x，這里面包含的都是當年最新規范的草案，每年更新。這里面還細分為 > Stage 0 - 稻草人: 只是一個想法，經過 TC39 成員提出即可。 > Stage 1 - 提案: 初步嘗試。 > Stage 2 - 初稿: 完成初步規范。 > Stage 3 - 候選: 完成規范和瀏覽器初步實現。 > Stage 4 - 完成: 將被添加到下一年度發布。 **注意事項：**低一級的 stage 會包含所有高級 stage 的內容，例如 stage-1 會包含 stage-2, stage-3 的所有內容 ## 執行順序 插件的執行順序與preset的執行順序關系。 1 先執行插件中的配置，然后執行preset中的。 2 插件中的從前到后 3 preset中的按照從后到前，因為一般情況下preset的順序是逆向的 ## 插件和配置項 簡略情況下，插件和 preset 只要列出字符串格式的名字即可。但如果某個 preset 或者插件需要一些配置項(或者說參數)，就需要把自己先變成數組。第一個元素依然是字符串，表示自己的名字；第二個元素是一個對象，即配置對象。 ``` "presets": [ // 帶了配置項，自己變成數組 [ // 第一個元素依然是名字 "env", // 第二個元素是對象，列出配置項 { "module": false } ], // 不帶配置項，直接列出名字 "stage-2" ] ``` ## 特別介紹 env env 的核心目的是通過配置得知目標環境的特點，然后只做必要的轉換。例如目標瀏覽器支持 es2015，那么 es2015 這個 preset 其實是不需要的，于是代碼就可以小一點(一般轉化后的代碼總是更長)，構建時間也可以縮短一些。 如果不寫任何配置項，env 等價于 latest，也等價于 es2015 + es2016 + es2017 三個相加(不包含 stage-x 中的插件)。env 包含的插件列表維護在這里.你可以根據瀏覽器的兼容標準，也可以根據node的版本進行配置。 ``` //指定瀏覽器 { "presets": [ ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }] ] } //指定nodejs { "presets": [ ["env", { "targets": { "node": "6.10" } }] ] } ``` 特別說明： modules配置項，它的取值可以是 amd, umd, systemjs, commonjs 和 false。這可以讓 babel 以特定的模塊化格式來輸出代碼。如果選擇 false 就不進行模塊化處理。 ## 配套工具對比說明  ## babel 7變化 ### preset 的變更：淘汰 es201x，刪除 stage-x，強推 env (重點) ### npm package 名稱的變化 (重點) * babel-cli 變成了 @babel/cli。 * babel-preset-env 變成了 @babel/preset-env。進一步，還可以省略 preset 而簡寫為 @babel/env。 * babel-plugin-transform-arrow-functions 變成了 @babel/plugin-transform-arrow-functions。和 preset 一樣，plugin 也可以省略，于是簡寫為 @babel/transform-arrow-functions。 ### 不再支持低版本 node ### only 和 ignore 匹配規則的變化 不在操作于子目錄，只操作于當前目錄 ### @babel/node 從 @babel/cli 中獨立了 這個的意思就是需要你單獨安裝 ### babel-upgrade 幫助用戶進行babel的升級 ## 注意事項 ### 依賴部分加載（關聯引入樣式） 目前大部分的框架都支持依賴性載入，其對babel的配置有要求。一般是要求如下： 1 手動引入的方式，但是這種方式比較麻煩 ``` import DatePicker from 'antd-mobile/lib/date-picker'; // 加載 JS import 'antd-mobile/lib/date-picker/style/css'; // 加載 CSS // import 'antd-mobile/lib/date-picker/style'; // 加載 LESS ``` 2 使用babel-plugin-import (推薦方式) ``` // .babelrc or babel-loader option { "plugins": [ ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 會加載 less 文件 ] } ``` 然后只需從 antd-mobile 引入模塊即可，無需單獨引入樣式。 ``` // babel-plugin-import 會幫助你加載 JS 和 CSS import { DatePicker } from 'antd-mobile'; ``` 注意事項 ： 1 如果你遇到報錯：Module build failed: ReferenceError: Unknown plugin "import" specified in "base" at 0, attempted to ，那么你裝下模塊即可。npm i babel-plugin-import --save 2 如果你遇到生產環境打包后沒有對應得樣式，那么你需要prod對應的babel-loader的部分也增加對應的import的配置 ## 參考文章 - [了解babel](https://mp.weixin.qq.com/s/qetiJo47IyssYWAr455xHQ)