前言
preset與plugin的關系:
- preset中已經包含了一組用來轉換ES6+的語法的插件,如果只使用少數新特性而非大多數新特性,可以不使用preset而只使用對應的
轉換插件 - babel默認只轉換語法,而不轉換新的API,如需使用新的API,還需要使用對應的
轉換插件或者polyfill
例如，默認情況下babel可以將
箭頭函數，class等語法轉換為ES5兼容的形式，但是卻不能轉換Map，Set，Promise等新的全局對象，這時候就需要使用polyfill去模擬這些新特性
1. 使用轉換插件: babel-plugin-transform-xxx
- 使用方法
- 缺啥補啥,在
package.json添加所需的依賴babel-plugin-transform-xxx - 在
.babelrc中的plugins項指定使用babel-plugin-transform-xxx插件 - 代碼中不需要顯式
import/require,.babelrc中不需要指定useBuiltIns,webpack.config.js中不需要做額外處理,一切由babel插件完成轉換
- 缺啥補啥,在
- 優點
- 作用域是模塊,避免全局沖突
- 是按需引入,避免不必要引入造成及代碼臃腫
- 缺點
- 每個模塊內單獨引用和定義polyfill函數,造成了重復定義,使代碼產生冗余
配置完一個轉換插件后, 代碼中每個使用這個API的地方的代碼都會被轉換成使用
polyfill中實現的代碼
2. 使用插件 babel-runtime 與 babel-plugin-tranform-runtime
相比方法1, 相當於抽離了公共模塊, 避免了重復引入, 從一個叫core.js的庫中引入所需polyfill(一個國外大神用ES3寫的ES5+ polyfill)
- 使用方法
package.json中添加依賴babel-plugin-tranform-runtime以及babel-runtime.babelrc中配置插件:"plugins": ["transform-runtime"]- 接下來, 代碼中可以直接使用ES6+的新特性,無需
import/require額外東西,webpack也不需要做額外配置
- 優點
- 無全局污染
- 依賴統一按需引入(polyfill是各個模塊共享的), 無重復引入, 無多余引入
- 適合用來編寫lib(第三方庫)類型的代碼
- 缺點
- 被
polyfill的對象是臨時構造並被import/require的,並不是真正掛載到全局 - 由於不是全局生效, 對於實例化對象的方法,如
[].include(x), 依賴於Array.prototype.include仍無法使用
- 被
3. 全局babel-polyfill(不使用useBuiltIns)
- 使用方法
- 法3.1: (瀏覽器環境)單獨在html的
<head>標簽中引入babel-polyfill.js(CDN或本地文件均可) - 法3.2: 在
package.json中添加babel-polyfill依賴, 在webpack配置文件增加入口: 如entry: ["babel-polyfill",'./src/app.js'], polyfill將會被打包進這個入口文件中, 而且是放在文件最開始的地方 - 法3.3: 在
package.json中添加babel-polyfill依賴, 在webpack入口文件頂部使用import/require引入,如`import 'babel-polyfill'``
- 法3.1: (瀏覽器環境)單獨在html的
- 優點
- 一次性解決所有兼容性問題,而且是全局的,瀏覽器的
console也可以使用
- 一次性解決所有兼容性問題,而且是全局的,瀏覽器的
- 缺點
- 一次性引入了ES6+的所有polyfill, 打包后的js文件體積會偏大
- 對於現代的瀏覽器,有些不需要polyfill,造成流量浪費
- 污染了全局對象
- 不適合框架或庫的開發
4. 全局babel-polyfill(使用babel-preset-env插件和useBuiltIns屬性)
- 使用方法
packge.json引入依賴babel-preset-env.babelrc中使用配置preset-env- 指定
useBuiltins選項為true - 指定瀏覽器環境或node環境, 配置需要兼容的瀏覽器列表
- 在
webpack入口文件中使用import/require引入polyfill, 如import 'babel-polyfill' - 以上配置完成之后,
babel會根據指定的瀏覽器兼容列表自動引入所有所需的polyfill, 不管你代碼中有沒有使用
- .babelrc示例
{
"presets": [ ["env", { "modules": false, "targets": { "browsers": ["ie >=9"] }, "useBuiltIns": true, "debug": true }] ] } - 優點
-
按需(按照指定的瀏覽器環境所需)引入
polyfill, 一定程度上減少了不必要polyfill的引入 -
配置簡單, 無需對
webpack做額外的配置 -
注意:
- 不可與方法3混用,否則會引起沖突
- 全局方式要保證
polyfill在所有其它腳本之前被執行(首行import或者設置為html的第一個<head>標簽)
-
5. polyfill.io
- 一個
CDN方式提供的polyfill, 可根據瀏覽器UserAgent自動返回合適的polyfill, 詳細內容自行google
作者：榮兒飛
鏈接：https://www.jianshu.com/p/3b27dfc6785c
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。