@babel/polyfill 總結

原文連接 https://babeljs.io/docs/en/ba...

@babel/polyfill

Babel 包含一個polyfill 庫。這個庫裏包含 regenerator 和 core-js.

這個庫將會模擬一個徹底的 ES2015+ 的環境。

這意味着你可使用 新的內置語法 好比 promise 或者 WeakMap， 靜態方法好比Array.from 或 Object.assign, 實例方法 好比 Array.prototype.includes 和 generator 函數。

Installation

npm install --save @babel/polyfill

這個是在你的source code 前運行的，因此安裝的時候是 --save

size

polyfill 用起來很方便，可是你應該和 @babel/preset-env 以及 useBuiltIns option 一塊兒用。這樣在使用的時候就不會包含那些咱們通常不會用到的polyfill 了。若是不這樣作的話，咱們仍是建議你手動引入你須要的每一個polyfill

TC39 提案

若是你想使用一些不在 Stage 4 中的提案，@babel/polyfill 不會自動幫你引入它們。你能夠從 core-js 中單獨引入。

usage in Node/Browserify/Webpack

爲了引入polyfill。你須要在你應用的 entry point 的頭部引入它

確保 它在 其餘代碼或者 引用前被調用

require('@babel/polyfill')

若是你使用的是es6 的import 語法，你也要在入口點的頂部引入polyfill,以確保首先加載polyfill。

import '@babel/polyfill'

webpack 集成polyfill

• 和@babel/preset-env 一塊兒用的時候

  • 若是在.babelrc 中指定 useBuiltIns: 'usage'的話，那麼就不要在webpack.config.js 的 entry array 和source 中包含 @babel/polyfill 了。注意，@babel/polyfill 依然須要安裝
  • 若是在.babelrc 中指定 useBuiltIns: 'entry'的話，那麼就要和上面討論的同樣，在你應用的入口文件頂部經過require 或者 import 引入@babel/polyfill.
  • 若是在.babelrc 中沒有指定 useBuiltIns 的值或者 設置 useBuiltIns: false. 能夠直接在webpack.config.js 的 entry array 中添加 @babel/polyfill

  module.exports = {
          entry: ['@babel/polyfill', './app']
      }

• 若是沒有使用@babel/preset-env.那麼就能夠像咱們上面討論的同樣把@babel/polyfill 添加到webpack 的entry array 中。你也能夠直接經過import 或require 把它添加到應用的入口文件頂部。可是咱們並不推薦這麼作

Usage in Browser

在瀏覽器中使用的話，直接引入@babel/polyfill 發佈的文件dist/polyfill.js 就好了。
這個文件須要包含在全部你編譯好的代碼以前。你能夠把它放在你編譯好的代碼以前，也能夠放在一個script 標籤之中。