babel-polyfill的幾種使用方式

時間 2019-11-08

標籤 babel polyfill 幾種使用方式简体版

原文原文鏈接

前言

preset與plugin的關係:html

例如，默認狀況下babel能夠將箭頭函數，class等語法轉換爲ES5兼容的形式，可是卻不能轉換Map，Set，Promise等新的全局對象，這時候就須要使用polyfill去模擬這些新特性node

使用方法
- 缺啥補啥,在package.json添加所需的依賴babel-plugin-transform-xxx
- 在.babelrc中的plugins項指定使用babel-plugin-transform-xxx插件
- 代碼中不須要顯式import/require, .babelrc中不須要指定useBuiltIns, webpack.config.js中不須要作額外處理,一切由babel插件完成轉換
優勢
- 做用域是模塊,避免全局衝突
- 是按需引入,避免沒必要要引入形成及代碼臃腫
缺點
- 每一個模塊內單獨引用和定義polyfill函數,形成了重複定義,使代碼產生冗餘

配置完一個轉換插件後, 代碼中每一個使用這個API的地方的代碼都會被轉換成使用polyfill中實現的代碼webpack

相比方法1, 至關於抽離了公共模塊, 避免了重複引入, 從一個叫core.js的庫中引入所需polyfill(一個國外大神用ES3寫的ES5+ polyfill)web

使用方法
- 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.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'``
優勢
- 一次性解決全部兼容性問題,並且是全局的,瀏覽器的console也可使用
缺點
- 一次性引入了ES6+的全部polyfill, 打包後的js文件體積會偏大
- 對於現代的瀏覽器,有些不須要polyfill,形成流量浪費
- 污染了全局對象
- 不適合框架或庫的開發

{
  "presets": [ ["env", { "modules": false, "targets": { "browsers": ["ie >=9"] }, "useBuiltIns": true, "debug": true }] ] }