怎麼給新手科普Babel：polyfill/preset-env/plugin-transform-runtime

時間 2019-11-30

標籤怎麼新手科普 babel polyfill preset env plugin transform runtime 简体版

原文原文鏈接

原文：www.yuque.com/xiezhongfu/…node

@babel/polyfill

更多內容參見： babeljs.io/docs/en/bab…webpack

Babel 7.4.0 開始，這個包已通過時了，源碼直接引入了 corejs 和 regenerator
git

圖片源地址： github.com/babel/babel…

應用代碼裏可使用，工具庫就不該該使用(下文會介紹@babel/plugin-transform-runtime)
模擬了 ES6+ 環境(不包括：Stage 0/1/2/3)
在程序的入口處添加，一勞永逸
由於是在各 prototype 上添加 poliyfill 方法，會致使全局污染

進化方案

@babel/preset-env + useBuiltIns (下文會介紹)
你本身手動單獨導入你須要的 polyfill 子包

共有 2 個替代方案，推薦使用第1個，第1個方案其實就是第二個方案的自動化版本。怎麼自動化呢？根據運行目標環境自動選擇須要哪些 polyfill 子包。具體見下。github

@babel/preset-env

更多內容參見： babeljs.io/docs/en/pre… babeljs.io/docs/en/bab…web

@babel/preset-env 基於一些牛逼的項目：browserslist，compat-table，electron-to-chromium，......
@babel/preset-env 自動適配設定的目標環境須要的 js 特性，Babel 轉換插件(不包含 stage-0/1/2/3的插件)，corejs 的 poliyfill。自動適配能夠有選擇性的污染全局，固然也能夠不分青紅皁白所有轉換到ES5，具體參見：babeljs.io/docs/en/bab…json

你須要掌握在 webpack 中如何自定義配置 @babel/preset-env，掌握 @babel/preset-env + useBuiltIns 替代 @babel/polyfill 的配置。 babel

方案1

安裝 @babel/polyfill
在 .babelrc 中配置useBuiltIns: 'usage'

方案2

安裝 @babel/polyfill
在應用入口處引入@babel/polyfill
在 .babelrc 中配置useBuiltIns: 'entry'

方案3

安裝 @babel/polyfill
在 .babelrc 中配置useBuiltIns: 'false' ，這是默認行爲
在 webpack 配置的入口處添加 @babel/polyfill

@babel/plugin-transform-runtime

更多內容參見： babeljs.io/docs/en/bab… github.com/babel/babel…electron

術語解釋

helper：好比 Babel 使用 _extend 函數把一個對象的屬性複製到另外一個對象上，這裏的 _extend 就是 helper函數

有了前兩個技術方案，爲何還會出個 @babel/plugin-transform-runtime 呢？工具

你不想污染全局
你想在一個工具庫中使用
默認 helper 函數會在須要的文件中都被聲明或定義一次，不只浪費並且無法跨文件支持

@babel/plugin-transform-runtime 提供了一個沙盒環境，使用一些高版本 js 特性時會指向到 corejs，沒有污染全局，可是由於沒有在 prototype 上作 polyfill，一些高版本 js 的實例方法就無法使用了，好比：Array.prototype.includes 。

@babel/plugin-transform-runtime 讓全部的 helper 函數都指向 @babel/runtime 組件，這樣節省空間還能跨文件支持，方便統一管理。這也就要求 @babel/runtime 須要預先安裝。

配置

在 .babelrc 配置文件裏，帶着默認參數的配置

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}
複製代碼