Babel 简单介绍和使用

Question

Babel 是 JavaScript 的编译器，它最常用的就是将 ES6+ 的代码转换成浏览器向后兼容的 ES5 代码。以下是 Babel 可以做的事情：

• 转换语法
• 浏览器特性 Polyfill 兼容
• 源代码转换

基本使用

通过 babel.config.js 来配置。一个基本的配置可以是这样：

module.exports = {
  presets: [
    ['@babel/preset-env']
  ],
  plugins: [],
}

原理

大致的转换过程：

1. 解析源码，生成 AST 抽象语法树
2. 对 AST 进行转换，生成新的 AST。比如将 ES6 语法的 AST 转换成 ES5 的 AST
3. 根据新的 AST 生成目标代码

解析阶段 : 分为词法分析和语法分析，@babel/parser 包

• 词法分析

主要就是分词，将代码分割成一个个 tokens 存在数组里。比如下面这句代码：

var name = '张三'

词法分析就会分析成，关键字 var，标识符 name ，运算符 = 还有字符串 '张三'。

• 语法分析

语法分析主要就是根据特定语法规则将 tokens 转为 AST。

转换阶段 ： @babel/traverse
这个阶段会对 AST 进行深度优先遍历，遍历的过程中对节点进行增删改，以便得到目标语法。具体实现是：Babel 会维护一个 Visitor 对象，这个对象定义了各种方法，然后对 AST 的 type 匹配不同的方法，来对节点进行转换。由于是深度优先遍历，因此每个节点会访问到两次，因而 visitor 对象的方法也分别定义了 enter 和 exit 两个函数表示进入节点和离开节点的操作。

生成阶段 ：@babel/generator
主要就是根据新的 AST 来生成目标代码。这个过程就是针对 AST 这颗树，对不同的节点做不同的处理，比如一个 while 声明，那就执行 while 循环打印节点，类似这样把整颗树翻译成代码。

在这个阶段，Babel 通过 插件 来执行不同语法的转换操作。以下列举几个常用插件：

• @babel/plugin-transform-react-jsx : 转换 jsx
• @babel/plugin-transform-arrow-functions : 转换箭头函数为普通函数
• @babel/plugin-transform-destructuring : 解构赋值转换

如果是自定义插件，可以通过在对象里定义 pre 和 post 方法来执行操作，以及在 visitor 对象里定义转换语法的函数。

export default {
  pre(state) {
    
  },
  visitor: {
  
  },
  post(state) {
  
  }
}

preset

使用 Babel 转码 JS 代码会用到很多插件，因此 Babel 贴心的准备了一个插件的集合，里面定义了许多常用转译函数，称为 preset 集合，比如前面定义的 @babel/preset-env 就是一个预置了很多不同环境支持的集合。