引子

对于初中级前端开发工程师来说，Babel是一个非常陌生的概念，所以熟悉Babel是我们成为高级前端开发工程师的必经之路。

浏览器只能识别HTML、CSS、JavaScript，而不能识别像TypeScript、Less、Sass等等语言，而如果想要在浏览器中使用这些语言，就需要将它们转换成浏览器能够识别的语言。

Babel的作用

对于JavaScript来说，它的语法是不断在更新的，比如ES6、ES7、ES8等等，而浏览器并不是每次都能够及时的更新，即使最新的浏览器支持了ES6、ES7、ES8等等语法，但是我们也不能保证用户的浏览器都是最新的，所以我们需要一种方式，让浏览器能够识别这些新的语法。

而Babel出现的目的，就是为了解决这个问题。

当然，Babel大多数时候还得配合打包工具来进行使用，比如Webpack、Rollup等等。

之所以将Babel和打包工具分开来讲，是因为Babel和打包工具的职责是不一样的，Babel的职责是将一种语法转换为另一种语法，而打包工具的职责是将多个文件整合到一起，然后发布到线上。

确切的说，打包工具的职责是将多个文件整合到一起，然后发布到线上，而不是将多个文件整合到一起，然后将其转换为另一种语法，比如将TypeScript转换为JavaScript，这并不是打包工具的职责，而是Babel的职责。

而打包工具的职责是将多个文件整合到一起，然后发布到线上，这里的多个文件，可以是JavaScript、TypeScript、Less、Sass等等，而不仅仅是JavaScript。

为什么要学习Babel呢？

试想一下，我们熟悉的React、Vue、Angular等等框架，它们都有自己的一些语法，比如JSX、Vue单文件组件等等，而这些语法，浏览器是无法识别的，所以我们需要将它们转换为浏览器能够识别的语法，这就需要Babel来进行处理。

往大了说，如果你想要开发一个框架，并且觉得现在的语法并不能满足你的需求，那么你就需要自己去实现一套语法，然后再将其转换为浏览器能够识别的语法，这时候你就需要学习Babel了。

往小了说，如果你想要开发一个Babel插件，比如满足你自己的需求，那么你就需要学习Babel了。

有微信小程序开发经验的同学，应该都知道，微信小程序拥有包体积限制，所以我们就需要将图片等资源上传到服务器，然后在小程序中引用线上的资源，而不是本地的资源，这样就能够减少包体积，从而满足微信小程序的要求。

但问题是，我们在开发的时候，肯定是引用本地的资源，而不是线上的资源，如果你在开发时需要手动将图片等资源上传到服务器，然后在项目中引用图片的线上路径，那么这样做的效率肯定是很低的，所以我们可以开发一个Babel插件，在项目中使用本地路径，在打包时自动将这些本地资源上传到服务器，然后将项目中的本地路径替换为线上路径，这样就能够提高开发效率。

所以如果你想实现这样的功能，那么你就需要学习Babel。

当然Babel是现在的主流，它拥有一个非常庞大的生态圈，大部分知名的框架都是基于Babel来进行开发的，所以不推荐自己去重新撸一套转换语法的工具，而是直接使用Babel。