Babel 插件手册   梦寐以求的文档

  • 2020 年 2 月 25 日
  • 筆記

来源：https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md

Babel 的使用就是使用一些预设配置。预设就是一组插件，比如env,  stage-3   flow  react  typescript预设。 Babel的核心就是插件，插件就是基于核心函数，对AST树的一些操作 Babel 核心的核心就是一组函数      【重要函数】 parser  traverse  generator  core.parser  core.transorm      【辅助函数】 code-frame  helpers  template  types   Babel 插件手册是官网编写的插件指南！涉及基本概念，API，转换操作，构建节点，最佳实践等部分

一、基本概念

AST抽象语法树

所有类型节点都有Node 接口以及其它参数，比如代码的起始位置，参数，左右节点等等：

interface Node {    type: string;  }

Babel处理步骤

Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。.

遍历AST之访问者模式：

       通过访问者模式，访问每一个节点！     深度递归遍历整个树。 

1、访问者名字：

最普通是用Node 的 type 名为访问者的名字， 它是一个函数，但有几种高级用法 ，见下面示例

const MyVisitor = {    //  1、所有节点类型进入  参见：https://www.babeljs.cn/docs/babel-traverse#usage    enter(path){}    //  2、某类型的进入或退出    Identifier: {      enter() {        console.log("Entered!");      },      exit() {        console.log("Exited!");      }    }    //  3、通过某个类型名称    MemberExpression（）{     }    //  4、通过helps中定义 的 别名    Function(path) {}    //  5、同时匹配几种类型    "ExportNamedDeclaration|Flow"(path) {}  }

babel-types中已定义一组别名，比如Function 可以代表多种Node类型， FunctionDeclaration, FunctionExpression, ArrowFunctionExpression, ObjectMethod and ClassMethod 。参见下面源码

2、访问者的参数–path：

第一感觉，这个参数应该是Node，但通过前面代码可以发现它叫：path。

其实参数是Path对象，它是表示两个节点之间连接的对象。 在巨大的AST树中，用来表示节点的位置的对象，Path对象的node才是节点本身，parent是父节点对象。  还有其它很多相关属性，   恩，想想也满合理的设计，为插件编写者省了不少力！

{    "parent": {...},    "node": {...},    "hub": {...},    "contexts": [],    "data": {},    "shouldSkip": false,    "shouldStop": false,    "removed": false,    "state": null,    "opts": null,    "skipKeys": null,    "parentPath": null,    "context": null,    "container": null,    "listKey": null,    "inList": false,    "parentKey": null,    "key": null,    "scope": null,    "type": null,    "typeAnnotation": null  }

3、执行访问者：

traverse(someAST  , MyVisitor )

每一个path对象也可以traverse.   path.traverse(  SomeVisitor ,  contextObj) 。此时就不传入AST了，因为path已然包含AST信息， 第二个参数contextObj是表示传入SomeVisitor访问都的上下文，可以通过this.xxxValue来访问。

4、（访问者间的）States

官方的例子看的人难受， 我以为它是想说明这样一个问题：

     所有的匹配到的访问者函数会被调用，在函数中，不应该使用全局变量（也访问者函数之外的变量），来维护某一个States。

如果我在某一个访问函数中，计算出一个值，想把这个值传递给下级的AST树，让下级节点处理某一个操作时，  应该在当前位置执行一个新的traverse,  此即相当于嵌套递归。  前面的计算值可以通过对象contextObj 传递给下级AST树     path.traverse(  SomeVisitor ,  contextObj)

5、Scopes 和 Binding

说实话，真看不懂呀！

VirMach 便宜 VPS

QNews

QNews