Babel快速指南

一.作用

Babel is a JavaScript compiler.

结构上属于编译器，由于输入JS源码，输出也是JS源码（所谓source to source），所以也称为transpiler（转译器）

二.原理

You give Babel some JavaScript code, it modifies the code and generates the new code back out.

具体的，源码转换工作分为3个步骤：

parsing -> transforming -> generation

首先“理解”源码所具有的语义，接着进行语义层面的转换，最后从语义表示形式映射回源码形式

而语义表示形式，在Babel里指的就是AST（抽象语法树）：

How it modifies the code? Exactly! It builds AST, traverses it, modifies it based on plugins applied and then generate new code from modified AST.

所以，就代码的表示形式而言，是通过引入中间表示形式（AST）来进行语义转换的：

       parsing      transforming               generation
String -------> AST ------------> modified AST ----------> String

整个过程中，parsing和generation是固定不变的，最关键的是transforming步骤，通过babel插件来支持，这是其扩展性的关键

P.S.编译原理相关的概念，见再看编译原理

parsing

输入JS源码，输出AST

parsing（解析），对应于编译器的词法分析，及语法分析阶段。输入的源码字符序列经过词法分析，生成具有词法意义的token序列（能够区分出关键字、数值、标点符号等），接着经过语法分析，生成具有语法意义的AST（能够区分出语句块、注释、变量声明、函数参数等）

实际上就是对代码字符串进行语义识别的过程，输入一段代码串，如何识别出其语法含义，例如：

var a = 'A variable.';

经过parsing后，生成的AST如下：

{
  "type": "VariableDeclaration",
  "declarations": [
    {
      "type": "VariableDeclarator",
      "id": {
        "type": "Identifier",
        "name": "a"
      },
      "init": {
        "type": "Literal",
        "value": "A variable.",
        "raw": "'A variable.'"
      }
    }
  ],
  "kind": "var"
}

它说：这是个var类型的变量声明，变量名叫a，初始值是个字面量，值为"A variable."

没错，AST能够完整地描述代码所具有的语法含义，有了这份信息，编译器就能像人一样理解代码了，这是进行语义层面转换的基础

P.S.JS代码对应的AST结构可以通过AST Explorer工具查看

transforming

输入AST，输出修改过的AST

transforming（转换），对应于编译器的机器无关代码优化阶段（稍微有点牵强，但二者工作内容都是修改AST），对AST做一些修改，比如把变量名a改为input：

{
  "type": "VariableDeclaration",
  "declarations": [
    {
      "type": "VariableDeclarator",
      "id": {
        "type": "Identifier",
        "name": "input"
      },
      "init": {
        "type": "Literal",
        "value": "A variable.",
        "raw": "'A variable.'"
      }
    }
  ],
  "kind": "var"
}

修改AST节点属性即可，但如果要把声明与赋值拆开的话，就需要新增AST节点：

[{
  "type": "VariableDeclaration",
  "declarations": [
    {
      "type": "VariableDeclarator",
      "id": {
        "type": "Identifier",
        "name": "input"
      },
      "init": null
    }
  ],
  "kind": "var"
},
{
  "type": "ExpressionStatement",
  "expression": {
    "type": "AssignmentExpression",
    "operator": "=",
    "left": {
      "type": "Identifier",
      "name": "input"
    },
    "right": {
      "type": "Literal",
      "value": "A variable.",
      "raw": "'A variable.'"
    }
  }
}]

它说：第一个语句是个var类型的变量声明，变量名叫input，没有初始值。第二个语句是个表达式语句，具体的是赋值表达式，操作符是=，左操作数是标识符input，右操作数是字面量，值为"A variable."

语义层面的转换具体而言就是对AST进行增、删、改操作，修改后的AST可能具有不同的语义，映射回代码字符串也不同

generation

输入AST，输出JS源码

generation（生成），对应于编译器的代码生成阶段，把AST映射回代码字符串，例如：

var input;
input = 'A variable.';

比起parsing，generation的过程相对容易些，拼接字符串而已

三.用法

简单示例

把常量名转换成大写，即：

// 输入
const numberFive = 5;
// 要求输出
const NUMBER_FIVE = 5;

清晰起见，分别引用@babel/parser、@babel/traverse与@babel/generator（不直接使用@babel/core提供的上层API）：

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generate = require('@babel/generator').default;

let input = `
const number = 'number';
const numberFive = 5;
const numberSix = 6, numberSeven = numberSix + 1;
const XMLHttpRequest = window.XMLHttpRequest;
let aString = 'string';
var numberEight = numberSeven + 1;
function f() {
  const numberEleven = numberSeven + 4;
  return numberFive + numberEleven + numberEight;
}
`;

// 1.解析
let ast = parser.parse(input);
// 2.转换
function renameConst(name) {
  return name.replace(/([a-z])([A-Z])/, '$1_$2').toUpperCase();
}
function renameConstBindings(path) {
  let ownBindings = path.scope.bindings;
  for (let name in ownBindings) {
    if (ownBindings[name].kind === 'const') {
      path.scope.rename(name, renameConst(name));
    }
  }
}
traverse(ast, {
  Program: {
    exit: renameConstBindings
  },
  Function: {
    exit: renameConstBindings
  }
});
// 3.生成
let output = generate(ast);

// test
console.log(output.code);

输出：

const NUMBER = 'number';
const NUMBER_FIVE = 5;
const NUMBER_SIX = 6,
      NUMBER_SEVEN = NUMBER_SIX + 1;
const XMLHTTP_REQUEST = window.XMLHttpRequest;
let aString = 'string';
var numberEight = NUMBER_SEVEN + 1;

function f() {
  const NUMBER_ELEVEN = NUMBER_SEVEN + 4;
  return NUMBER_FIVE + NUMBER_ELEVEN + numberEight;
}

纯作用域操作（找出常量，再重命名即可），scope相关的更多API见babel/packages/babel-traverse/src/scope/index.js

四.插件

定义

Babel插件的一般格式为：

export default function(babel) {
  return {
    // 必需，配合traverse使用的visitor对象
    visitor: {},

    // 可选，继承其它插件，比如识别JSX、async function等语法
    inherits: OtherPlugin,
    // 可选，插件执行前，初始化状态，如cache
    pre(state) {},
    // 可选，插件执行后，收尾清理工作
    post(state) {}
  }
}

所以很容易把上面的常量名转换功能包装成Babel插件，把转换部分的visitor拿进来即可：

// babel-plugin-transform-const-name.js
export default function(babel) {
  return {
    visitor: {
      Program: {
        exit: renameConstBindings
      },
      Function: {
        exit: renameConstBindings
      }
    }
  }
}

P.S.通过Babel配置选项设置的插件参数，可以通过state.opts读取，具体见Plugin Options

编译

Babel及插件运行的Node环境不支持ES Module（export default），所以插件自身需要编译，这里通过@babel/cli来完成：

npx babel plugins --no-babelrc --presets=@babel/preset-env --out-dir lib

也可以通过npm scripts来做：

"scripts": {
  "compile-plugins": "babel plugins --no-babelrc --presets=@babel/preset-env --out-dir lib"
}

把./plugins/目录下的插件源码全都转一遍放到./lib/下，文件名保持不变

配置

一般通过.babelrc配置文件（放在项目根目录下）来应用指定插件：

{
  "plugins": ['./lib/babel-plugin-transform-const-name.js']
}

注意，这里用的是编译后的（lib目录下）插件，否则会报错不支持export关键字：

SyntaxError: Unexpected token export

应用

然后通过@babel/core让插件跑起来：

const babel = require('@babel/core');
const input = require('fs').readFileSync('./const-rename-input.js', 'utf-8');

let output = babel.transform(input, {
  filename: 'const-rename-input.js'
});
console.log(output.code);

注意，要走.babelrc配置的话，必须指定filename，具体见babel.transform API is not using .babelrc

.babelrc files are loaded relative to the file being compiled. If this option is omitted, Babel will behave as if babelrc: false has been set.

或者不走.babelrc直接通过CLI来跑：

npx babel const-rename-input.js --no-babelrc --presets=@babel/preset-env --plugins=./lib/babel-plugin-transform-const-name.js

P.S.Babel ClI的更多用法，见Usage

输出：

"use strict";

const NUMBER = 'number';
const NUMBER_FIVE = 5;
const NUMBER_SIX = 6,
      NUMBER_SEVEN = NUMBER_SIX + 1;
const XMLHTTP_REQUEST = window.XMLHttpRequest;
let aString = 'string';
var numberEight = NUMBER_SEVEN + 1;

function f() {
  const NUMBER_ELEVEN = NUMBER_SEVEN + 4;
  return NUMBER_FIVE + NUMBER_ELEVEN + numberEight;
}

五.应用场景

删除调试代码

去掉console.xxx，debugger，具体实现如下：

function removeConsoleCall(path, {types: t}) {
  if (path.node.name === 'console') {
    let consoleCall = path.findParent(p => p.isCallExpression());
    if (consoleCall) {
      try {
        consoleCall.remove();
      } catch(ex) {
        consoleCall.replaceWith(t.identifier('undefined'));
      }
    }
  }
}
export default function(babel) {
  return {
    visitor: {
      Identifier: {
        enter(path) {
          removeConsoleCall(path, babel);
        }
      },
      DebuggerStatement: {
        enter(path) {
          path.remove();
        }
      }
    }
  }
}

注意一个细节，默认删掉console.xxx（consoleCall.remove();），但有些情况不能直接删除，比如作为操作数参与运算时，删掉就会引发语法错误，这里利用path操作自带的校验，捕获此类错误并以替换成undefined来兜底

输入：

console.log(1);
window.console.log(2);
console.error('err');
let result = 2 > 1 ? console.log(3) : window.console.log(4);
if (true) debugger;
if (true) {
  debugger;console.log(2);alert(3);
  let three = 2 + (console.info('info'), 1);
}

输出：

"use strict";

var result = 2 > 1 ? undefined : undefined;

if (true) {}

if (true) {
  var three = 2 + (1);
}

看起来不错，但对于别名之类难以追踪的东西无能为力，例如：

let log = console.log.bind(console);
log(4);
var c = window.console;
c.log(5);
// 存在误伤
void function(c) {
  c.log(6);
  alert(7);
}(window.console);

输出：

var log;
log(4);
var c = window.console;
c.log(5); // 存在误伤

void undefined;

常量编译替换

编译时，把_GET_CONFIG('c3')为对应的配置信息，如：

{
  "c1": "#FFFFFF",
  "c2": "#00FFFF",
  "c3": "#FF00FF",
  "c4": "#FFFF00"
}

插件内容如下：

const CONFIG_MAP = {
  "c1": "#FFFFFF",
  "c2": "#00FFFF",
  "c3": "#FF00FF",
  "c4": "#FFFF00"
};

export default function({types: t}) {
  return {
    inherits: require("@babel/plugin-syntax-jsx").default,
    visitor: {
      CallExpression: {
        enter(path) {
          if (path.node.callee.name === '_GET_CONFIG') {
            let args = path.node.arguments.map(v => v.value);
            let configValue = CONFIG_MAP[args[0]] || '';
            path.replaceWith(t.stringLiteral(configValue));
          }
        }
      }
    }
  }
}

输入：

function render() {
  return <div style={{color: _GET_CONFIG('c3')}}></div>
}

输出：

"use strict";

function render() {
  return <div style={{
    color: "#FF00FF"
  }}></div>;
}

同样，只能应对静态替换的场景，不支持别名，也不支持变量：

let x = 'c3';
_GET_CONFIG(x);
let get = _GET_CONFIG;
get('c4');

输出：

var x = 'c3';
"";
var get = _GET_CONFIG;
get('c4');

其它场景

实现强约束：比如使用 babel 插件来打造真正的“私有”属性，用Symbol作为私有属性的key，把道德规范变成强约束
源码转换：有专门的工具facebook/jscodeshift，提供了更方便的API（如findVariableDeclarators('foo').renameTo('bar')），尤其适合API升级之类的需要大规模重构的场景，例如reactjs/react-codemod
格式化：如Prettier，进行语义等价的代码风格转换，比如箭头函数参数带不带括号、语句末尾要不要分号之类的
可视化：js2flowchart能够根据代码输出流程图，读源码可以参考，也可以用来分析祖传逻辑

黯羽轻扬