本文首发于政采云前端团队博客：前端工程师需要了解的Babel 知识

https://www.zoo.team/article/babel

Babel 是怎么工作的

做与不做

• 箭头函数
• let / const
• 解构

• 全局变量
• Promise
• Symbol
• WeakMap
• Set
• includes
• generator 函数

Babel 编译的三个阶段

• 解析（Parsing）：将代码字符串解析成抽象语法树。
• 转换（Transformation）：对抽象语法树进行转换操作。
• 生成（Code Generation）: 根据变换后的抽象语法树再生成代码字符串。

解析（Parsing）

AST 是怎么来的？

• 分词：将整个代码字符串分割成语法单元数组
• 语法分析：建立分析语法单元之间的关系

• 关键字： const、 let、   var 等
• 标识符：可能是一个变量，也可能是 if、else 这些关键字，又或者是 true、false 这些常量
• 运算符
• 数字
• 空格
• 注释：对于计算机来说，知道是这段代码是注释就行了，不关心其具体内容

其实分词说白了就是简单粗暴地对字符串一个个遍历。为了模拟分词的过程，写了一个简单的 Demo，仅仅适用于和上面一样的简单代码。Babel 的实现比这要复杂得多，但是思路大体上是相同的。对于一些好奇心比较强的同学，可以看下具体是怎么实现的，链接在文章底部。

function tokenizer(input) {
  const tokens = [];
  const punctuators = [',', '.', '(', ')', '=', ';'];

  let current = 0;
  while (current < input.length) {

    let char = input[current];

    if (punctuators.indexOf(char) !== -1) {

      tokens.push({
        type: 'Punctuator',
        value: char,
      });
      current++;
      continue;
    }
    // 检查空格，连续的空格放到一起
    let WHITESPACE = /\s/;
    if (WHITESPACE.test(char)) {
      current++;
      continue;
    }

    // 标识符是字母、$、_开始的
    if (/[a-zA-Z\$\_]/.test(char)) {
      let value = '';

      while(/[a-zA-Z0-9\$\_]/.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'Identifier', value });
      continue;
    }

    // 数字从0-9开始，不止一位
    const NUMBERS = /[0-9]/;
    if (NUMBERS.test(char)) {
      let value = '';
      while (NUMBERS.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({ type: 'Numeric', value });
      continue;
    }

    // 处理字符串
    if (char === '"') {
      let value = '';
      char = input[++current];

      while (char !== '"') {
        value += char;
        char = input[++current];
      }

      char = input[++current];

      tokens.push({ type: 'String', value });

      continue;
    }
    // 最后遇到不认识到字符就抛个异常出来
    throw new TypeError('Unexpected charactor: ' + char);
  }

  return tokens;
}

const input = `console.log("zcy");`

console.log(tokenizer(input));

转换（Transformation）

Plugins

Presets

Plugin/Preset 路径

Plugin/Preset 排序

• Plugin 会运行在 Preset 之前。
• Plugin 会从第一个开始顺序执行。
• Preset 的顺序则刚好相反(从最后一个逆序执行)。

1. @babel/plugin-proposal-decorators
2. @babel/plugin-proposal-class-properties
3. @babel/plugin-transform-runtime
4. @babel/preset-env

生成（Code Generation）

如何编写一个 Babel 插件

插件格式

写一个简单的插件

实现一个简单的按需打包功能

至此，这个插件我们就编写完成了。

Babel 常用 API

@babel/core

@babel/cli

@babel/node

babylon

babel-traverse

babel-types

babel-generator

总结

招贤纳士