[轉] babel-present-env 與 babel-polyfill 學習總結

babelrc 配置文件

{
  "presets": [ [ "env", { "modules": false, "useBuiltIns": true, "targets": {"browsers": ["last 2 versions", "safari >= 7", "ie>=9"]} } ], "stage-0", "react" ], "plugins": [ "syntax-dynamic-import", [ "import", { "libraryName": "antd", "style": "css" } ] ] }

babel-present-env

根據你支持的環境自動決定適合你的 Babel 插件的 Babel preset。它使用了 compat-table 在沒有任何配置選項的狀況下，babel-preset-env 與 babel-preset-latest（或者babel-preset-es2015，babel-preset-es2016和babel-preset-es2017一塊兒）的行爲徹底相同。 它不會包含 stage-x 插件。env 將會支持咱們認爲最新版本的JavaScript的全部插件（過咱們匹配在 babel-preset-latest 中所做的）。 這款preset能靈活決定加載哪些插件和polyfill，不過仍是得開發者手動進行一些配置(targets)。 

babel-polyfill

• polyfill 的意思

polyfill這個單詞翻譯成中文是墊片的意思，詳細點解釋就是桌子的桌腳有一邊矮一點，拿一個東西把桌子墊平。polyfill在代碼中的做用主要是用已經存在的語法和api實現一些瀏覽器尚未實現的api，對瀏覽器的一些缺陷作一些修補。例如Array新增了includes方法，我想使用，可是低版本的瀏覽器上沒有，我就得作兼容處理

理解polyfill的意思以後，再來講說babel爲何存在polyfill。

由於babel的轉譯只是語法層次的轉譯，例如箭頭函數、解構賦值、class，對一些新增api以及全局函數 （例如：Promise）沒法進行轉譯，這個時候就須要在代碼中引入babel-polyfill，讓代碼完美支持ES6+環境。 前面介紹的babel-node就會自動在代碼中引入babel-polyfill包。

• 但不少時候咱們並不會使用全部ES6+語法，全局添加全部墊片確定會讓咱們的代碼量上升，以後會介紹其餘添加墊片的方式。
• transform-runtime(transform-es2015-arrow-functions", //轉譯箭頭函數) 與 babel-runtime helpers 這種是按需進行 polyfill 無需全局引入 babel-polyfill 在必定程度上會減小代碼體積

比較transform-runtime與babel-polyfill引入墊片的差別：

使用runtime是按需引入，須要用到哪些polyfill，runtime就自動幫你引入哪些，不須要再手動一個個的去配置plugins，
只是引入的polyfill不是全局性的，有些侷限性。
並且runtime引入的polyfill不會改寫一些實例方法，
好比Object和Array原型鏈上的方法，像前面提到的Array.protype.includes。 babel-polyfill就能解決runtime的那些問題，它的墊片是全局的，並且全能， 基本上ES6中要用到的polyfill在babel-polyfill中都有，它提供了一個完整的ES6+的環境。 babel官方建議只要不在乎babel-polyfill的體積，最好進行全局引入，由於這是最穩妥的方式。 通常的建議是開發一些框架或者庫的時候使用不會污染全局做用域的babel-runtime， 而開發web應用的時候能夠全局引入babel-polyfill避免一些沒必要要的錯誤， 並且大型web應用中全局引入babel-polyfill可能還會減小你打包後的文件體積（相比起各個模塊引入重複的polyfill來講）。 babel-polyfill 在項目代碼前插入全部的 polyfill 代碼，爲你的程序打造一個完美的 es2015 運行環境。 babel 建議在網頁應用程序裏使用 babel-polyfill，只要不在乎它略有點大的體積（min 後 86kb），直接用它確定是最穩妥的。 值得注意的是，由於 babel-polyfill 帶來的改變是全局的，因此無需屢次引用，也有可能所以產生衝突， 因此最好仍是把它抽成一個 common module，放在項目 的 vendor 裏，或者乾脆直接抽成一個文件放在 cdn 上。 回到應用開發。經過自動識別代碼引入 polyfill 來優化看來是不太靠譜的，那是否是就無從優化了呢？ 並非。還記得 babel 推薦使用的 babel-preset-env 麼？它能夠根據指定目標環境判斷須要作哪些編譯。 babel-preset-env 也支持針對指定目標環境選擇須要的 polyfill 了，只需引入 babel-polyfill，並在 babelrc 中聲明 useBuiltIns，babel 會將引入的 babel-polyfill 自動替換爲所需的 polyfill。 

babel-present-env 的參數  useBuiltIns

1. 若是useBuiltIns爲true，項目中必須引入babel-polyfill。 2. babel-polyfill只能被引入一次，若是屢次引入會形成全局做用域的衝突。 作了個實驗，一樣的代碼，只是.babelrc配置中一個開啓了useBuiltIns，一個沒有，兩個js文件體積相差70k https://github.com/Shenfq/studyBabel/tree/master/7-babel-env useBuiltIns 能夠根據以前的配置自行添加 polyfill，默認不開啓。 安裝 babel-polyfill 後只要引入一次就行：import "babel-polyfill"; 

• webpack2 的 tree shanking 技術

tree-shaking 都是由於 ES6 modules 的靜態特性才得以實現的.
能夠在編譯階段肯定模塊依賴

要在項目中使用這一技術需將 .babelrc 的 env 選項的 modules設爲false， 即不須要babel處理es6模塊，而交由webpack來處理

總結

• 因爲有了 babel-present-env 才能夠手動按需配置所須要的 polyfill
• babel-present-env 僅僅包括 babel-present-201五、201六、2017，不包括：babel-stage-x，也不包括 babel-polyfill
• babel-present-env 僅僅轉換 新版的語法 如：箭頭函數，並不轉換新版api 如：Array.include
• 轉換新版api及抹平瀏覽器之間的差別（兼容ie）須要 babel-polyfill

參考文章

• babel-present-env
• babel配置詳解
• babel官網
• jjc
• babel-polyfill