前端工程化之Babel详解和实战

浏览器的发展跟不上语言的发展，es6+虽然很普及了，但也不是所有浏览器都可以支持 es6+语法。babel 的诞生就源于此。

什么是 Babel

Babel 是一个广泛使用的 JavaScript 编译器，主要功能是将 ECMAScript 2015+版本的代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版本的浏览器或环境中运行。它出现的原因是 JavaScript 语言快速发展，新的语言特性不断加入，但这些新特性并不总是被所有的浏览器或环境所支持。Babel 使得开发者可以使用最新的 JavaScript 特性，而不必担心兼容性问题。它通过转换新语法和实现新特性来实现这一点。此外，Babel 也支持 React 的 JSX 语法，使其在转换过程中能够转换为标准的 JavaScript 代码。

Babel 的出现主要是为了解决以下两个痛点：

• ES 标准兼容性问题
• 支持提前尝试 ES 的新特征

ES 标准兼容性问题

首先是兼容性问题，在 ES5 之前，JavaScript 就是充满缺陷的语言：历史包袱终、不支持模块化、作用域污染、不支持 class、原型链继承、令人迷惑的 this 等等。所以在长达十年的讨论、修补后，新发布了 ES6 规范，为 JavaScript 添加了一些语言特征，改善可维护性，提高开发体验。

但是软件版本的发布是非常谨慎的问题。当特征变动较大时，其开发工具、浏览器环境都未必能调整过来。ES6 改动幅度非常大，而市面上绝大多数浏览器还在使用 ES5，ES6 并没有得到浏览器的原生支持，也几乎没有什么人用 ES6。

于是 Babel 的原型 6To5 应运而生。Babel 是 JavaScript 的编译器，它运行你愉快地编写 ES6，然后写好了在编译成 ES5 的代码，这样就解决了浏览器不兼容 ES6 规范的问题。可以说，ES6 的推广离不开 6To5 的功劳。

随着时间的发展，6to5 扩展了其功能，开始支持更多的 ES 标准和实验性语言特性，最终更名为 Babel，以反映其作为一个更通用的 JavaScript 编译器的身份。

支持提前尝试 ES 的新特征

Babel 汲取了 ES5 以前提案的一些教训。在 ES5 以前，每次提案都没法及时验证合理性，如果移开式设计的不合理，则一代又一代下去会变成一坨屎山。换了一种思路：既然可以把新规范改为旧规范的代码，那么有没有一种办法，提前尝鲜新规范呢？

于是 Babel 添加了对新规范中特种的支持，尤其是还未正式发布的新规范。它的好处就是提前尝试新规范，供开发者在实践中验证新特种的合理性。如果在使用中觉得某个特种设计的好久保留，不好就撤回修正，这比一拍脑袋就做决策发布规范科学的多嘛。也就是熟，Babel 可以引导 JavaScript 规范往合理处发展。

Babel 的编译流程

Babel 的编译流程可以分为三步：

1. parse：通过使用 @babel/parser 负责将 es6 代码进行语法分析和词法分析后转