编译器 Babel 的概念

很多人在配置Babel的时候总会出现配了这里丢了那里，这个很常见的问题往往是因为对Babel的基本概念缺乏整体性的了解，把Babel当作一个黑盒在使用。本文着重讲解Babel一系列的概念，意在为 Babel 的配置打下良好的基础。

目录

Babel的作用

Syntax / Feature

plugin / preset / env

---

Babel的作用

babel是一种特殊的编译器，它的原语言是JS目标语言也是JS，主要用于将高版本的JS代码编译成低版本的JS代码，这一需求的诞生是因为高版本的代码有编写效率更高，更易读，更规范等特点，而低版本的JS代码拥有更好的兼容性，能覆盖更广泛的用户群体等优势。虽然Babel能做的事情远不止这一件，但是它是Babel存在的最核心原因。 

babel能做的事情

• 语法转换
• polyfill（在老环境实现新的API）
• 修改源码

Syntax / Feature

Syntax

Syntax即语法，语言级别中某一概念的写法，不可被语言中的任何其他概念实现， 这是一个很基础的概念。相当于数学中的公理，如平行线永不相交、圆周率等，是其他推论的基础不可以再被重新定义。在程序中就比如ES6的箭头函数、class、解构赋值等

Feature

与Syntax对应的语言中可以被开发者自己实现的部分就是feature，比如一些实例方法、静态方法、全局对象等，

plugin / preset / env

plugin

和很多其他构建工具一样Babel也是插件化的，Babel本身不会对代码进行任何操作，所有功能都靠插件实现。

常见插件：

• @babel/plugin-transform-arrow-functions
• @babel/plugin-transform-destructuring
• @babel/plugin-transform-classes
• 更多：可以在plugin list 中查看全部插件列表及使用方式

preset

Babel官方提供的预设，是一组插件的组合，让开发者不用一个一个插件的去配置，可以大大节省开发者的配置时间。比如在开发React或者TS项目的时候就可以直接使用官方提供的相关预设。

• @babel/preset-env
• @babel/preset-react
• @babel/preset-typescript
• @babel/preset-flow
• 各个preset的用途与使用方式见 Babel Preset

说到preset顺带提一下ECMAScript新特性的诞生过程，ECMAScript语言新特性的提案，在TC39委员会会经历5个阶段后才会被正式发布，以前Babel会为前四个阶段的未成熟特性提供专门的preset，但是在Babel V7中就已经废弃了，Babel建议这些不稳定的特性单独的用plugin去解决，如果你的项目中还沉积着这些preset可以用babel-upgrade进行升级

TC39提案的5个阶段：

• Stage 0-提案刚提出的时候，可能仅仅是个想法
• Stage 1-大家发现这是个值得去实现的提案
• Stage 2-草稿阶段:形成了最初的规范文档
• Stage 3-候选人阶段:拥有了完整的规范文档和初步的浏览器实现
• Stage4- 结束阶段，明年会正式发布

env

Babel的配置让人头大，虽然preset的出现很大程度上减轻了配置的负担，但是我们任然要关系用户的浏览器能不能支持某一特性的问题，为了解决这个问题env诞生了。

@babel/preset-env是一种更加智能的preset。让开发者只需要配置目标环境，preset-env会根据指定目标环境生成相关的plugin配置列表传递给Babel。