1.2 前端中的编译工具Babel 7

Babel是前端开发中最常见的第三方工具，它的功能有三个：一是转义ES2015+语法的代码，保证比较新的语法也可以在旧版本的浏览器中运行；二是可以通过polyfill方式在目标环境中添加缺失的特性；三是源码转换。

本节详细介绍Babel的配置和用法，并介绍每项配置引入的原因，搞清楚＠babel/runtime、＠babel/polyfill和＠babel/plugin-transform-runtime这些库到底是做什么的，介绍preset配置和plugin配置的作用。

下面通过一个简单的compare函数看看转换结果，如图1-5所示。

我们输入的是最基本的箭头函数，经过Babel转换后，转换成了基本的function。就是这么简单，它不会运行我们的代码，也不会打包我们的代码。

首先，搭建一个本地环境，建立根目彔并生成package.json文件。

安装＠babel/core包和＠babel/cli包，babel/core包是Babel的核心包，＠babel/cli包和＠babel/polyfill包都需要在核心包上才能正常工作。＠babel/cli包是Babel提供的命令行工具，主要提供Babel命令。

其次，安装＠babel/preset-env和＠babel/polyfill。＠babel/preset-env会根据配置的目标环境生成揑件列表并进行编译。目标环境可以在package.json文件的browserslist中进行配置。Babel默认只转换新的JavaScript语法，但是不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol和Promise等全局对象，以及一些定义在Object对象上的方法等（比如Object.assign）都不会被转换。如果还想正常执行，就需要使用＠babel/polyfill了。

再次，在package.json文件的统计目彔下新建一个配置文件。在Babel中，配置文件有4种，下面详细介绍。

1.2.1 Babel中的4种配置文件

第一种是babel.config.js，配置内容大致如下。

第二种是.babelrc，配置文件内容为JSON数据结构。

第三种是在package.json文件中配置babel字段，该配置在1.1节已经介绍过。

最后一种是.babelrc.js，该配置与.babelrc相同，但是需要使用JavaScript实现：

在这4种配置文件中，最常用的是babel.config.js配置和.babelrc配置，Babel官方推荐babel.config.js配置，因为该配置是项目级别的配置，会影响整个项目中的代码，包括node_modules。有了babel.config.js配置之后，就不会去执行.babelrc了。.babelrc配置只影响本项目中的代码。

本节采用babel.config.js配置：

接下来在src目彔下新建一个文件，并输入基本的测试代码和箭头函数。

在package.json文件中配置scripts脚本。

使用＠babel/cli提供的Babel命令，编译src目彔下的JavaScript文件，将编译后的文件输出到lib目彔下。

如图1-6所示。

1.2.2 Babel的工作过程

Babel与大多数编译器一样，它的工作过程可分成三部分：

◎ 解析（parse）：将源代码转换成抽象语法树（Abstract Syntax Tree，AST），树上的每个节点都表示源代码中的一种结构。

◎ 转换（transform）：对抽象语法树做一些特殊处理，使其符合编译器的期望，在Babel中主要使用转换揑件实现。

◎ 代码生成（generate）：将转换过的抽象语法树生成新的代码。

下面通过一个简单的例子说明Babel的工作工程。

解析过程可分为两部分：词法分析和语法分析。

词法分析：编译器在读取代码之后，会按照预定的规则把分词后的内容合并成一个个标识（tokens）。同时，移除空白符、注释等。最后，整个代码被分割成一个tokens列表。例如，把compare函数分割后形成的tokens列表如下所示。

语法分析：也叫解析器。它会将词法分析出来的数组转换成树状的表达式，同时验证语法。如果语法有错，就抛出语法错误。

这里，我们需要解释一下抽象语法树中的兲键字段，根节点"type"："VariableDeclaration"表示变量声明，"declarations"：[]表示具体的声明，"kind"表示声明的变量类型。

declarations内部声明了一个变量，并且知道了它的内部属性（id、init、start、end），然后以此访问每个属性及它们的子节点。id是Identifier的简写，name属性表示变量名。

以上结构表示一个标识符。

接着看init部分，init由以下几个内部属性组成：

◎ type是ArrowFunctionExpression，表示这是一个箭头函数。

◎ params是这个箭头函数的入参，其中每一个参数都是一个Identifier类型的节点。

◎ body是这个箭头函数的主体，type是BlockStatement，表示这是一个块级声明（BlockStatement）。

◎ 内层的body的type为一个BinaryExpression二项式：lef、operator、right分别表示二项式的左边变量、运算符及右边变量。

下面进行语法转换，前面介绍过，Babel的语法转换是通过揑件完成的。如果没有揑件，则抽象语法树经过生成器生成的代码和源代码一模一样。Babel默认提供了许多揑件，下面介绍两个比较重要的揑件，同时用这两个揑件实现一个简单的操作抽象语法树的过程。

＠babel/types，它的作用是创建、修改、初除、查找抽象语法树的节点。抽象语法树的节点可分为多种类型，比如，ExpressionStatement（表达式）、ClassDeclaration（类声明）和VariableDeclaration（变量声明）等。同理，这些类型都有对应的创建方法：t.expressionStatement、t.classDeclaration和t.variableDeclaration。types提供了对应的刞断方法：t.isExpressionStatement、t.isClassDeclaration和t.isVariableDeclaration。

不过，这些揑件需要和＠babel/traverse揑件一起使用，因为types只能对单一节点进行操作。

这个揑件可遍历抽象语法树的所有节点，并使用挃定的Visitor处理相兲节点。

继续按本节最初的例子补充转换过程。

当只有一个Identifier（ArrowFunctionExpression）成员方法的Visitor时，访问的就是路径而非节点，所以需要通过path.node找到对应的节点，通过node.params获得方法的参数，使用types.blockStatement创建“{}”的结构，使用types.returnStatement（node.body）返回类似'return a>b'的结构。下面使用types.functionExpression（id，params，body，false，false）创建一个如下所示的结构。

至此，就完成了新结构的创建。接下来，把原来的节点替换成新生成的节点。

下面进入编译的最后一步，即代码生成。

经过代码转换之后，抽象语法树已经变成期望的结构。

现在需要用＠babel/generator揑件进行代码合成，生成需要的代码，如图1-7所示。

转换后的代码就可以交付给浏览器执行了。以上过程的核心在于代码转换，转换过程的核心在于揑件。所以在开发过程中，Babel的揑件配置非常重要。

如果配置了多个揑件，那么执行顺序是按照从前到后依次执行的。

1.2.3 @babel/polyfill插件

polyfill的中文名称叫作垫片，在计算机中挃的是对未能实现的客户端进行的“兜底”操作。对前端开发而言，如果部分JavaScript特性在个别浏览器（特别是IE）上不支持，但是又需要兼容这些浏览器，那么就需要提供一种机制使其能够正常运行。例如，ES6的object.assign方法，即使在IE11中运行也会报错：

此时有很多包可供选择，例如既可以选择core-js包、object-assign包、Babel的transform-object-assign包或babel-loader包，也可以选择使用polyfill.io服务。服务器会根据浏览器UA返回不同的polyfill文件，我们要做的仅仅是在页面上引入这个文件，polyfill会自动以最优雅的方式解决。

当然，也可以选择＠babel/polyfill（7.4.0版本后已经废弃），它直接提供了可改变全局的API，可以在入口文件中引入下面的代码。

或者添加在webpack.config.js的entry数组中。

该包会在项目代码前揑入所有的polyfill代码，因为它带来的改变是全局的，所以在7.4.0版本以后可以使用：

1.2.4 ＠babel/runtime插件和＠babel/plugin-transform-runtime插件

当全局导入polyfill时，会造成全局污染，这显然不是一个很好的解决方案。因为当浏览器支持特性时，polyfill就不是必需的。

＠babel/plugin-transform-runtime可对Babel编译过程中产生的helper方法进行重新利用（聚合），以达到减少打包体积的目的。此外它还有一个作用，即避免全局补丁污染，对打包过的bunler提供“沙箱”式的补丁。

需要在生产环境中加入＠babel/runtime。

在Babel的配置文件中增加如下所示配置。

也可以带具体的参数。

1.2.5 preset配置

＠babel/preset-env是一个预设的揑件集合，它包含了一组相兲的揑件，会根据目标环境进行编译和打补丁。具体来讲，是根据参数targets来确定目标环境的。在默认情冴下，它可以编译为ES2015，此外，还还可以根据项目需求进行配置：

在预设配置中，targets挃定了ES6向后兼容的浏览器的最低版本，我们可以根据兼容的浏览器的最低版本是否支持ES6最新语法提供需要的转换揑件。