Question

polyfill和transpiler有什么区别？

我经常阅读类似语境中使用的相同术语。

Answer 1

这两种方法都有相同的用途：您可以编写使用某些功能的代码，这些功能尚未在目标环境中实现。然而，他们通过使用不同的技术来做到这一点。

polyfill 会尝试模拟某些API，因此可以像使用它们一样使用它们。

另一方面，转发器将转换您的代码并用其他代码替换相应的代码部分，这些代码已经可以执行。

如果目标浏览器尚未实现您要使用的最新前沿功能（读取浏览器API），通常使用polyfill。另一方面，转换器将允许您使用语言功能，目标环境尚不支持，例如，一些ES6功能，如fat arrow functions。

Answer 2

填充工具

单词polyfill是一个发明的术语（由 Remy Sharp 引用），用于指定较新的功能并生成 a一段代码，它等同于行为，但能够在older JS environments中运行。

例如：

ES1定义了一个名为isNaN(value)的方法，用于确定某个值是否为非法数字（非数字）。

ES6定义了一个名为Number.isNaN(value)的方法，也决定了一个值 NaN （非数字）。

如果您注意到，每个浏览器都不支持Number.isNaN()，那么为此您可以填充方法。 并非所有新功能都是完全可填充的 。有时，大多数行为都可以进行多层填充，但仍然存在小的偏差。您应该非常 自己实施polyfill非常小心 ，以确保您尽可能严格遵守规范。或者更好的是，使用已经经过审查的一套可以信任的polyfill，例如ES5-Shim和ES6-Shim提供的那些。

// These method is a sample of making polyfill 
if (!Number.isNaN) {
    Number.isNaN = function isNaN(x) {
        return x !== x;
    };
}

Transpile

无法填充已添加到该语言的新语法。新语法会将旧JS引擎中的错误抛出为无法识别/无效。 因此，更好的选择是使用一种工具将您的新代码转换为旧代码。此过程通常称为“transpiling” transforming + compiling的一个术语。

您应该关注transpiling有几个重要原因：

The new syntax added to the language is designed to make your code more readable and maintainable。较旧的等价物往往更复杂。您应该更喜欢编写更新更清晰的语法，不仅适用于您自己，也适用于开发团队的所有其他成员。
If you transpile only for older browsers, but serve the new syntax to the newest browsers，您可以利用新语法优化浏览器性能。这也让浏览器制造商拥有更多真实的代码来测试他们的实现和优化。
Using the new syntax earlier allows it to be tested more robustly in the real world，它向Javascript委员会（TC39）提供早期反馈。如果早期发现问题，可以在语言设计错误成为永久性之前更改/修复问题。

有很多很棒的transpilers供您选择。在撰写本文时，以下是一些不错的选择：

Babel（以前为6to5）：Transpiles ES6 and above into ES5
Traceur ：Transpiles ES6, ES7, and beyond into ES5

Answer 3

填充就像复制一项功能，以便人们可以使用它。在polyfilling中，只需编写代码即可获得与其他JS版本相同的功能。

使用transpiler转换具有新语法的转换代码，以便可以在具有较旧Js版本的浏览器中使用。

Answer 4

pollyfill和transpilation都使您能够在旧环境中使用新功能（例如，旧浏览器与新浏览器），主要区别在于pollyfill通过在旧环境本身中实现功能来实现。因此，如果我们使用Es6 Es5术语，polyfill使您能够通过在Es5中实现它来使用新功能，但是某些新功能永远无法在Es5中实现，例如，考虑一下Es6引入的箭头语法，这就是转译的地方需要。

因此需要进行代码转换的示例是箭头语法（（）=> {}），因为您永远无法在es5中实现该语法，例如，如果您想实现Array，则可以使用pollyfil的示例。 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;
  };
}

现在有一些主要区别：

pollyfill将使用本机功能（如果存在），但是不会进行转换。得出的结论是，出于安全和性能方面的考虑，应该优先选择Polyfills而不是Transpilation。
翻译与语言语法有关，而pollyfill与语言语法和本机浏览器API（或其他环境API）有关。
翻译是在编译时进行的，而pollyfill是在运行时进行的，这就是彼此区别的地方。

Answer 5

Polyfills are scripts that offer to emulate a feature that is not implemented in a browser.

polyfill和transpiler有什么区别？

5 个答案:

填充工具

Transpile