副标题：有什么区别，为什么有关系？
发布时间：2019年9月8日 - 4分钟阅读
照片：Scott Webb on Unsplash
"Babel的目的是把你的代码，使用浏览器可能还不支持的新功能，并把它转化为任何你关心的浏览器都能理解的代码。"Tyler McGinnis在 "编译与填充"中说。
什么是编译 JavaScript？
Babel是用来编译您的代码，使其与旧版本的JavaScript兼容（从而在旧版本的浏览器中工作）。
编译意味着编译器（Babel）会执行语法转换，但不会添加任何新的JavaScript基元。
当您编译您的代码时，您就是在转换它。
什么是 JavaScript 填充？
当您添加填充时，您是在您的JavaScript代码中添加了以前不存在的全新功能。
填充对于那些已经添加到JavaScript中的新功能是必要的，这些新功能在普通的JavaScript代码中是无法复制的。
Polyfills对于已经添加到全局JavaScript命名空间的新属性是必要的，因为编译器不会解释这些属性。
什么时候使用哪个？
归根结底是语法与属性的问题。例如，箭头函数是语法编译的，但Array.from是多义词填充的。
通常情况下，您需要同时使用填充和编译来使您的代码向后兼容旧的浏览器。
当支持现代浏览器时，这两种方法对于ES6功能来说都不是必需的，但是，一旦下一个伟大的JavaScript功能发布，知道如何使用它是一种很好的做法；编译和/或多边填充该新功能。
连词记忆法
"编译你干净的代码，但要填充你漂亮的属性。" - Dr. Derek Austin 🥳
(照片由Samuel Zeller在Unsplash上拍摄)
例子：填充式或编译式
箭头函数
Babel可以通过函数关键字将箭头函数转化为常规函数，这意味着箭头函数可以被编译。
类
类，如箭头函数，可以转化为常规函数（通过使用原型），所以类也可以被编译。
Promises
Babel将无法将承诺转化为旧浏览器能够理解的原生JavaScript语法。
更重要的是，编译不会向全局命名空间添加像 Promise 这样的新属性。这意味着Promises需要被填充。
析构
因为Babel可以使用点(.)符号将每一个结构化对象转化为正常变量，所以会进行反构造编译。
Includes
Includes可以被转换为使用indexof，但编译时不会添加任何新的关键字、属性或基元，所以Includes需要被填充。
（Photo by Silvio Kundt on Unsplash）
大名单：填充式或编译式
这个列表只包括ES6的功能，不包括较新的ECMAScript功能，如flatMap，这些功能也需要编译或填充。
可以被编译
- 箭头函数
- 异步函数
- 块内函数
- 类
- 类属性
- 计算属性
- 常量
- 修饰器
- 默认参数
- 析构
- 模块
- 对象聚合/展开
- 属性访问方法
需要进行填充
- ArrayBuffer
- Array.from
- Array.of
- Array#find
- Array#findIndex
- Fuction#name
- Map
- Number.isNan
- Object.assign
- Object.entries
- Object.values
- Promise
- Set
- String#includes
- Symbol
- WeakMap
- WeakSet
资料来源：Tyler McGinnis在他的在线课程 "现代Javascript "中，特别是在3:54的这个讲座（可在他的博客上免费获得）。神奇的Tyler McGinnis在他的在线课程Modern Javascript中，特别是3:54的这个讲座（可在他的博客上免费获得）。
（照片由Samuel Zeller在Unsplash上拍摄）
太多东西记不住？
如果某件事情需要在JavaScript中加入新的属性或基元，你就会知道它需要进行填充。
但如果改变的是简单的语法糖（如箭头函数），可以使用像Babel这样的工具进行编译。
当有疑问时，你总是可以简单地在谷歌上搜索你想做的事情以及关键字polyfill，例如arrow functions polyfill或array.from polyfill。
其他资源
- David Gilbertson 深入讨论了填充和转码（编译）。
- 官方的Babel文档对理解编译很有用。
- Remy Sharp 在 2010 年创造了 polyfill 这个术语，他是这样解释的：
把浏览器想象成一堵有裂缝的墙。这些polyfills有助于抚平裂缝，给我们提供了一堵光滑的浏览器墙。
(图片：Pierre Châtel-Innocenti on Unsplash)
通过www.DeepL.com/Translator（免费版）翻译
