如何安裝 babel-polyfill 庫？

Question

我剛開始使用 Babel 將我的 ES6 javascript 代碼編譯成 ES5。 當我開始使用 Promises 時，它似乎不起作用。 Babel 網站聲明通過 polyfills 支持 promise。

沒有運氣，我嘗試添加：

require("babel/polyfill");

或者

import * as p from "babel/polyfill";

有了這個，我將在我的應用程序引導中收到以下錯誤：

找不到模塊“babel/polyfill”

我搜索了該模塊，但似乎我在這里遺漏了一些基本的東西。 我還嘗試添加舊的和好的 bluebird NPM，但它看起來不起作用。

如何使用 Babel 的 polyfills？

Answer 1

這在 babel v6 中有所改變。

從文檔：

polyfill 將模擬完整的 ES6 環境。 使用 babel-node 時會自動加載這個 polyfill。

安裝：
$ npm install babel-polyfill

在 Node / Browserify / Webpack 中的用法：
要包含 polyfill，您需要在應用程序入口點的頂部要求它。
require("babel-polyfill");

在瀏覽器中的使用：
可從babel-polyfill npm 版本中的dist/polyfill.js文件中獲得。 這需要在所有編譯的 Babel 代碼之前包含。 您可以將它添加到編譯后的代碼中，也可以將其包含在它之前的<script> 。

注意： require通過 browserify 等，使用babel-polyfill 。

Answer 2

Babel 文檔非常簡潔地描述了這一點：

Babel 包含一個 polyfill，其中包含一個自定義的再生器運行時和 core.js。

這將模擬完整的 ES6 環境。 當使用 babel-node 和 babel/register 時，這個 polyfill 會自動加載。

在調用其他任何東西之前，確保在應用程序的入口點需要它。 如果你使用像 webpack 這樣的工具，那會變得非常簡單（你可以告訴 webpack 將它包含在包中）。

如果您使用的是gulp-babel或babel-loader類的工具，則還需要安裝babel包本身以使用 polyfill。

另請注意，對於影響全局范圍的模塊（polyfills 等），您可以使用簡潔的導入來避免在您的模塊中包含未使用的變量：

import 'babel/polyfill';

Answer 3

對於 Babel 版本 7，如果您使用 @babel/preset-env，要包含 polyfill，您所要做的就是在 babel 配置中添加一個值為 'usage' 的標志 'useBuiltIns'。 無需在您的應用程序的入口點要求或導入 polyfill。

指定此標志后，babel@7 將進行優化並且只包含您需要的 polyfill。

要使用此標志，請在安裝后：

npm install --save-dev  @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

只需添加標志：

useBuiltIns: "usage" 

到名為“babel.config.js”的 babel 配置文件（也是 Babel@7 的新內容），在“@babel/env”部分下：

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage"  // <-----------------*** add this
         }
      ]
   ];

   return { presets };
};

參考：

• 用法#polyfill
• babel-polyfill#usage-in-node-browserify-webpack
• babel-preset-env#usebuiltins

---

2019 年 8 月更新：

隨着 Babel 7.4.0（2019 年 3 月 19 日）的發布，@babel/polyfill 已被棄用。 您將安裝 core-js，而不是安裝 @babe/polyfill：

npm install --save core-js@3

一個新條目corejs被添加到你的 babel.config.js

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage",
             corejs: 3  // <----- specify version of corejs used
         }
      ]
   ];

   return { presets };
};

參見示例： https : //github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

參考：

• 7.4.0 發布：core-js 3、靜態私有方法和部分應用
• core-js@3、babel 和展望未來

Answer 4

如果您的 package.json 如下所示：

  ...
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-eslint": "^6.0.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
  ...

並且您收到Cannot find module 'babel/polyfill'錯誤消息，那么您可能只需要更改導入語句 FROM：

import "babel/polyfill";

到：

import "babel-polyfill";

並確保它出現在任何其他import語句之前（不一定在應用程序的入口點）。

參考： https : //babeljs.io/docs/usage/polyfill/

Answer 5

首先，沒有人提供明顯的答案，您需要將 Babel 安裝到您的應用程序中：

npm install babel --save

（或者babel-core如果你想要require('babel-core/polyfill') ）。

除此之外，我有一個繁重的任務來將我的 es6 和 jsx 編譯為構建步驟（即我不想使用babel/register ，這就是為什么我首先嘗試直接使用babel/polyfill ），所以我想更加強調@ssube 回答的這一部分：

在調用其他任何東西之前，確保在應用程序的入口點需要它

我遇到了一些奇怪的問題，我試圖從一些共享環境啟動文件中要求babel/polyfill ，但我收到了用戶引用的錯誤 - 我認為這可能與 babel 訂單導入與需要的方式有關，但我是現在無法重現。 無論如何，將import 'babel/polyfill'作為我的客戶端和服務器啟動腳本中的第一行解決了這個問題。

請注意，如果您想使用require('babel/polyfill')我會確保您所有其他模塊加載器語句也是需要的，而不是使用導入 - 避免將兩者混合。 換句話說，如果您的啟動腳本中有任何 import 語句，請將import babel/polyfill放在腳本的第一行而不是require('babel/polyfill') 。

Answer 6

babel-polyfill 允許您使用除語法更改之外的全套 ES6 功能。 這包括新的內置對象（如 Promises 和 WeakMap）以及新的靜態方法（如 Array.from 或 Object.assign）等功能。

如果沒有 babel-polyfill，babel 只允許你使用箭頭函數、解構、默認參數和 ES6 中引入的其他特定於語法的特性。

https://www.quora.com/What-does-babel-polyfill-do

https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

Answer 7

就像 Babel 在文檔中所說的那樣，對於 Babel > 7.4.0 模塊@babel/polyfill 已棄用，因此建議直接使用之前包含在 @babel/polyfill 中的core-js和regenerator-runtime庫。

所以這對我有用：

npm install --save core-js@3.6.5
npm install regenerator-runtime

然后添加到初始 js 文件的最頂部：

import 'core-js/stable';
import 'regenerator-runtime/runtime';