前言
当我们在开发前端项目的时候，我们需要使用许多新的语法特性和 API，比如 Promise 和 async/await，但是这些特性在一些老旧的浏览器中并不支持，在这种情况下，我们需要使用 Babel 进行编译。Babel 有许多插件和工具，其中两个非常常用的是 babel-polyfill 和 babel-register。
babel-polyfill
babel-polyfill 是一个 JavaScript 库，它通过在全局环境中添加一些新的特性来模拟出完整的 ES2015+ 运行时环境，从而使得可以使用新的 ES2015+ API。它可以在代码中的任何地方使用，但是需要在代码执行之前被加载进来。
因为它会改变全局环境，因此不建议在库中使用，因为库的行为可能会被影响，比如会污染全局作用域。在工程项目中，请尽可能使用预设以减小体积。
安装
使用 NPM 或者 Yarn 进行安装：
--- ------- ------ ---------------
或者
---- --- ---------------
使用
在 entry 文件的头部中引入：
------ ------------------
或者使用 script 标签引入：
------- -----------------------------------------------------------------
然后就可以在代码中使用 ES2015+ 的 API，比如：
-- -----------
----- -------- ----- -
----- --------------
-
-- -------------
----- --- - - ---- - --
----- ------ - ----------------- -----
-- -------
--- ----------------- ------- -- -
------------- -- -
----------------
-- ------
--- 指导意义
由于 polyfill 会改变全局环境，因此不建议在各类开发的库中使用，而是在 Web 应用程序（例如 Ember，React）中使用。这种方式在之前是最常见的使用方法。
但是需要注意的是，polyfill 会在项目中增加大量的代码，使项目打包后的大小变得更大，所以现在更多的 Web 应用程序使用的是 @babel/preset-env 其中需要配置使用重要的 ES6+ API。
babel-register
babel-register 是一个工具，它可以自动编译 ES6+ 的代码。它可以安装一次，在整个项目中使用它，也可以在需要编译的文件中使用。由于它改变了 Node 的 require() 函数，因此它只在开发阶段使用，并且不适用于 Webpack 等 Bundler 工具，因为这些工具自己处理 require 函数。
成为本地开发时的调试工具。现在已经被许多工具抛弃。
安装
使用 NPM 或者 Yarn 进行安装：
--- ------- ---------- ---------------
或者
---- --- ----- ---------------
使用
在运行代码或测试之前，添加以下代码段：
---------------------------
它会自动引入 Babel，并且编译所有 require 的文件。这个方法在 Web 应用程序中使用的时候非常不实用，但是在测试应用程序或者其他类型的应用程序中是非常有用的。
指导意义
由于 babel-register 编译时间过长而不够稳定，建议在生产环境中不要使用，因为会降低应用程序的性能。
总结
babel-polyfill 用于垫片，它模拟完整的 ES2015+ 运行时环境，使得可以使用新的 ES2015+ API，但是会增加大量文件大小。babel-register 是一种工具，它可以自动编译 ES6+ 代码，但是由于它改变了 Node 的 require() 函数，在 Web 应用程序中不适用于使用。
应该在 Web 应用程序中使用 @babel/preset-env。 它仅仅包括了你的项目使用的必要的方法和代码。在开发测试中，建议使用 babel-register 以获得更良好的体验。
如果您发现自己正在使用 babel-polyfill 并正在构建库，则最好使用 @babel/preset-env 代替，因为 @babel/preset-env 将会使您的项目更小，同时包括更多的代码支持，更小型的体积。
示例如下：
.babelrc
-
---------- ------------------------------------
---------- -
-
--------------------
-
---------- -
----------- ------ - ---------- --- -- ---
--
-------------- -------
-
-
-
-package.json
-
--------------- -
---------- --------
--
------------------ -
-------------- ----------
---------------------------------- ----------
-------------------- ----------
--------------- ---------
---------- ---------
-------------- --------
-
-Webpack 配置
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ----------------
-
-
-
--来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645c5372968c7c53b0ea6cb2