babel-polyfill

Posted 2023-05-01

参考技术A Babel默认只转换新的javascript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

相比方法1, 相当于抽离了公共模块, 避免了重复引入, 从一个叫core.js的库中引入所需polyfill(一个国外大神用ES3写的ES5+ polyfill)

.babelrc示例

如何安装 babel-polyfill 库？

【中文标题】如何安装 babel-polyfill 库？

【英文标题】：How do I install the babel-polyfill library?

【发布时间】：2015-09-16 07:13:12

【问题描述】：

我刚开始使用 Babel 将我的 ES6 javascript 代码编译成 ES5。当我开始使用 Promises 时，它看起来好像不起作用。 Babel 网站声明通过 polyfill 支持 Promise。

没有运气，我尝试添加：

require("babel/polyfill");

或

import * as p from "babel/polyfill";

这样我会在我的应用程序引导时收到以下错误：

找不到模块'babel/polyfill'

我搜索了该模块，但似乎我在这里遗漏了一些基本的东西。我还尝试添加旧的和好的 bluebird NPM，但它看起来不起作用。

如何使用 Babel 的 polyfill？

【问题讨论】：

npm install _name_

注意：Babel 现在为此提供了一个单独的 NPM 包：babel-polyfill

@StijndeWitt 只是为了节省您的点击，这里是完整版的完整 README.md 文件：

@gurghet 是的，他们可以在那里添加更多信息，我同意 :) 但你真正需要知道的是 npm install --save babel-polyfill 和 require('babel-polyfill)。

由于使用的是ES6，所以也可以使用import "babel-polyfill"。

【参考方案1】：

这在 babel v6 中有所改变。

来自文档：

polyfill 将模拟完整的 ES6 环境。这个 polyfill 在使用 babel-node 时会自动加载。

安装：$ npm install babel-polyfill

在 Node / Browserify / Webpack 中的使用： 要包含 polyfill，您需要在应用程序的入口点顶部添加它。require("babel-polyfill");

在浏览器中的使用： 可从 babel-polyfill npm 版本中的 dist/polyfill.js 文件获得。这需要包含在所有编译的 Babel 代码之前。您可以将其添加到已编译的代码中，也可以将其包含在 <script> 之前。

注意：不要通过 browserify 等 require 这个，使用 babel-polyfill。

【讨论】：

我仍然不完全确定何时需要 polyfill。为什么 ES6 模块只能与 babel.js 一起工作，但 Array.protorype.findIndex() 在没有 polyfill 的情况下无法工作，并且 babel 在编译时不会引发异常？这就是 Polyfill™ 的本质吗？

基本上 Babel polyfill 只是 github.com/facebook/regenerator 和 github.com/zloirock/core-js 的组合。查看这 2 个存储库，了解您是否真的需要 polyfill。

我认为一个有效而另一个无效的原因是 Babel 在转译时以具有一定支持水平的假设 JS 引擎为目标。真正的浏览器最终可能会支持或多或少地支持这个假设的引擎。实际上，我认为他们针对的假设浏览器位于 IE10 级别，因此较旧的浏览器可能存在一些问题。通过将此修复程序放在单独的 polyfill 中，他们将是否要支持此类旧浏览器的决定留给您。有点像 jQuery，它的 1.0 分支支持，而 2.0 分支不支持 IE8。 @RemEmber

@dougmacklin 如果 findIndex 是您需要的唯一 polyfill，您可以在代码中的某处包含它。检查 MDN 是否有 polyfill：developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

@vdlouis，您将如何通过 webpack 包含该 polyfill 代码，以便在项目中随处可用？

【参考方案2】：

Babel docs 非常简洁地描述了这一点：

Babel 包含一个包含自定义再生器运行时的 polyfill 和 core.js。

这将模拟一个完整的 ES6 环境。这个 polyfill 是 使用 babel-node 和 babel/register 时自动加载。

确保在调用其他任何内容之前，在应用程序的入口点需要它。如果您使用的是 webpack 之类的工具，那将变得非常简单（您可以告诉 webpack 将其包含在包中）。

如果您使用gulp-babel 或babel-loader 之类的工具，您还需要安装babel 包本身才能使用polyfill。

还要注意，对于影响全局范围的模块（polyfill 等），您可以使用简洁的导入来避免模块中出现未使用的变量：

import 'babel/polyfill';

【讨论】：

只是添加一个注释，我不能 100% 确定这是否完全正确，但我尝试只使用 import 'babel-core/polyfill' 而不安装 babel 并且效果很好。

Zaemz，我猜你已经安装了 babel，所以import 'babel-core/polifyll' 有效。我在没有安装babel 的情况下尝试了它，但它对我不起作用。顺便说一句：ssube 建议有效。

使用 webpack 的时候在哪里包含呢？

@theptrk 使用 webpack，您可以简单地将其作为模块导入，因为 webpack 允许导入 npm 包。对于 Karma，您 set it up as a file 将在您测试之前加入。

谢谢，也许我有不同的版本，但我不得不使用 babel-core => "import 'babel-core/polyfill';

【参考方案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 ;
;

参考：

usage#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/***-eg--babel-v7.4.0-polyfill-w-core-v3

参考：

7.4.0 Released: core-js 3, static private methods and partial application core-js@3, babel and a look into the future

【讨论】：

你在生产环境中使用这个吗？有风险吗？

useBuiltIns: "usage" 在我这边不起作用。它只是在 bundle 中不包含任何 polyfils（例如：我使用生成器并收到错误“regeneratorRuntime 未定义”）。有什么想法吗？

@WebBrother，为我工作...例如：github.com/ApolloTang/***-eg--babel-polyfill

@Roy，我实际上正在将一个企业项目从 babel@6 迁移到 babel@7，以便我可以使用 @babel/preset-typescript。这仍然是一项正在进行的工作，但我正在按照 babel 官方文档的说明进行操作（请参阅我的答案中的参考链接）。到目前为止，一切似乎都在工作，但我还没有将我的迁移/升级工作发送给 QA，如果出现任何问题，我会在这里发布。

我仍然收到此错误Opening developer tools in the browser... Cannot find module 'metro/src/lib/polyfills/require.js' Require stack:

【参考方案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/

【讨论】：

在这个答案中，babel-polyfill 包列在“devDependencies”下。这样做会导致 babel-polyfill 不包含在部署中。您不应该使用 -D 标志安装 babel-polyfill，而是使用 -S 标志，因此它列在“依赖项”下，因此包含在您的部署中。

【参考方案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')。

【讨论】：

你不需要用 npm docs.npmjs.com/getting-started/fixing-npm-permissions 运行sudo

【参考方案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

【参考方案7】：

就像 Babel 在docs 中所说，对于 Babel > 7.4.0 模块 @babel/polyfill 已弃用，因此建议直接使用 core-js以及之前包含在 @babel/polyfill 中的 regenerator-runtime 库。

所以这对我有用：

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

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

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