随着前端技术的不断发展，我们通常需要使用最新的 ECMAScript 标准（ES6、ES7等）来编写 JavaScript 代码。但是，这些新特性并不总是在所有浏览器中得到支持。这就产生了一个问题：如何保证我们的代码能够在所有浏览器上正确地运行？
这时候，Babel 和 Polyfill 技术就派上用场了！
Babel 是什么？
Babel 是一个流行的 JavaScript 编译器，它可以将最新的 ECMAScript 特性转换为向后兼容的 JavaScript 代码。这意味着，我们可以使用最新的语言特性，而同时又不必担心它们在旧版浏览器上无法正常运行。
例如，我们可以使用箭头函数、解构赋值和模板字符串等最新的 ES6 语法，而 Babel 将会将这些语法转换为普通的函数调用和对象属性，以便在旧版浏览器上正常工作。
以下是一段使用最新 ES6 语法的代码：
const greeting = (name) => `Hello, ${name}!`;使用 Babel 编译器，上面的代码可以被转换为旧版本浏览器能够理解的代码：
var greeting = function greeting(name) {
return "Hello, " + name + "!";
};Polyfill 是什么？
尽管 Babel 可以将最新的语法转换为向后兼容的代码，但是它并不能处理一些新的 API、方法、对象等其他特性。这时候，我们需要使用 Polyfill 技术。
Polyfill 是一个 JavaScript 代码片段，可以模拟浏览器中缺失的新特性。当浏览器不支持某个新特性时，Polyfill 就会自动加载并添加所需的功能，让代码能够在所有浏览器上正常运行。
例如，Promise 对象是 ES6 中引入的一个新特性，但是并不是所有的浏览器都支持它。为了在旧版浏览器上使用 Promise，我们可以引入一个 Promise 的 Polyfill：
import 'promise-polyfill/src/polyfill';
这样，在旧版浏览器中，我们就可以使用 Promise 对象了。
如何使用 Babel 和 Polyfill？
要在项目中使用 Babel，首先需要安装 Babel 编译器和相关依赖：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
然后，创建 .babelrc 文件，并在其中配置需要使用的插件和预设：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
----------- ------ - ---------- --- -- ----
-
--
-
-上面的配置将会转换代码以适应最近两个版本的浏览器和 IE11。
要在项目中使用 Polyfill，可以使用 Polyfill.io 这样的服务，也可以手动引入 Polyfill 库：
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
或者使用 polyfill.io 提供的 CDN 自动生成 polyfill 的链接。
除此之外，通过 npm 安装 core-js 和 regenerator-runtime 等库也是常见的做法：
npm install --save core-js regenerator-runtime
然后，在项目中引入需要使用的 Polyfill：
import 'core-js/stable'; import 'regenerator-runtime/runtime';
总结
Babel 和 Polyfill 技术可以帮助我们编写向前兼容的 JavaScript 代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10651