javascript - 为什么我需要 @babel/polyfill，使用 Babel？

Question

我正在学习巨大的 JavaScript 生态系统，但我无法理解以下内容。

Babel 是一个编译器，来自官网:

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

由于我使用 @babel/preset-env目前，我假设 这应该足够了根据我的浏览器列表，编写 ES6+ 代码并将其转换为一些兼容的代码。

然后，我进入了这个: https://babeljs.io/docs/en/babel-polyfill ，建议使用 @babel/polyfill代替:

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

而不是弃用的 @babel/polyfill .现在我知道什么是 polyfill，例如，我使用了 Intersection Observer polyfill。

所以我的问题是 :这是 Babel 提供的“自动”功能吗？某种可以自动填充我的代码的插件？他们在谈论的两个图书馆是什么？为什么我需要这两个额外的包来使我的代码与 ES5 兼容，如果 Babel 应该自己做的话？考虑 Object.assign :它只能在 IE11 中使用 core-js包裹。为什么 Babel 没有转译它？

编辑 : 我的错误阅读文章，但我的问题仍然是一样的。

Answer 1

polyfill 和 transpilation 都使您能够在旧环境中使用新功能(例如，考虑旧浏览器与新浏览器)，主要区别在于 polyfill 通过在旧环境中实现该功能来实现这一点。因此，如果我们使用 ES6 ES5 术语，polyfill 使您能够通过在 ES5 中实现来使用新功能，但是某些新功能永远无法在 ES5 中实现，例如考虑 ES6 引入的箭头语法，这就是转译的地方需要。
所以需要转译的一个例子是箭头语法 (() => {}) 因为你永远不能在 ES5 中实现它，一个可以使用 polyfill 的例子是例如如果你想实现 String.prototype.includes方法，您可以像这样轻松实现它:

// taken from mdn
if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';

    if (search instanceof RegExp) {
      throw TypeError('first argument must not be a RegExp');
    } 
    if (start === undefined) { start = 0; }
    return this.indexOf(search, start) !== -1;
  };
}

现在另一个重要的区别是，如果存在的话，polyfill 将使用 native 功能，但转译不会。由于安全和性能原因，因此得出的结论是 polyfills 应该比 transpilation 更受欢迎。
最后一个区别是转译是关于语言语法的，而 polyfill 是关于语言语法和原生浏览器 API。
长话短说:转译是在编译时，而 polyfill 是在运行时。
现在区别已经很清楚了，我们可以看到使用新的代码和特性 babel 使用这两种策略。主要指导原则是在可能的情况下使用 polyfill，否则需要进行转译(新语法将需要转译，而新语法在旧环境 ES5 本身中永远无法实现)。 因此，您需要将 core-js 导入到 polyfill 中可以通过转译启用的功能，但最好使用 polyfill 来实现它们。 .
所以让我们以一些代码为例来区分两者

const f = (str) => {
  return str.includes('fun')
}

babel 会做的是将其转译为如下内容:

var f = function f() {
 // notice that includes stay even though this is
 // an ES6 feature, the reason it stays is because
 // babel does not transpile it.
 // 
 // the following code will break if you don't import
 // a polyfill using core-js or any other polyfill library
 return str.includes('fun');
}

我已经删减了很多 babel 转译输出的内容，如果你想看它，你可以阅读 here .
现在对于你的问题，如果 babel 使用一些自动的东西来做到这一点，答案是肯定的，那就是 @babel/preset-env ，它将根据您的目标环境自动配置您所需的转译过程和 polyfill。