Babel 插件手册 笔记

Stella981
• 阅读 835

来源: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 。参见下面源码

Babel 插件手册 笔记

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

说实话,真看不懂呀!Scope就是一个层层嵌套的作用域,也叫Block,它包含Path(比Path还大一级的东西 )  Binding则用于从Scope中去访问变量!

Babel 插件手册 笔记

二  重要的API

这部分直接看Babel官方文档更好理解,https://www.babeljs.cn/docs/babel-parser

1、babylon(  相当于Babel)

babylon引入Parse方法,解析code字符串。 但在2018年,babylon就废弃了,变成Babel.parse了。  从这个角度说明,这份中文的Babel插件文档已经2年未更新了,内容过时了。 去官网文档英文版查找追踪过来,内容和中文版一致。

Babel 插件手册 笔记

2、traverse

Babel Traverse(遍历)模块维护了整棵树的状态,并且负责替换、移除和添加节点。

3、Babel Types 

Types包含一组函数,每个节点类型的定义节点构造器节点验证器,Converters(变换器)!  

其中Converters(变换器)的内容未编写

由于以下内容,简短且重要的概念,转引过来!

Babel Types模块是一个用于 AST 节点的工具库, 它包含了构造、验证以及变换 AST 节点的方法。 该工具库包含考虑周到的工具方法,对编写处理AST逻辑非常有用。 它还包含Definitions ,拥有每一个单一类型节点的定义,包括节点包含哪些属性,什么是合法值,如何构建节点、遍历节点,以及节点的别名等信息。

单一节点类型的定义Definitions 形式如下:

defineType("BinaryExpression", { builder: ["operator", "left", "right"], fields: { operator: { validate: assertValueType("string") }, left: { validate: assertNodeType("Expression") }, right: { validate: assertNodeType("Expression") } }, visitor: ["left", "right"], aliases: ["Binary", "Expression"] });

你会注意到上面的 BinaryExpression 定义有一个 builder 字段。.

builder: ["operator", "left", "right"]

这是由于每一个节点类型都有构造器方法builder,按类似下面的方式使用:

t.binaryExpression("*", t.identifier("a"), t.identifier("b"));

可以创建如下所示的 AST:

{ type: "BinaryExpression", operator: "*", left: { type: "Identifier", name: "a" }, right: { type: "Identifier", name: "b" } }

当打印出来之后是这样的:

a * b

构造器还会验证自身创建的节点,并在错误使用的情形下会抛出描述性错误,这就引出了Validators(验证器)

BinaryExpression 的定义还包含了节点的字段 fields 信息,以及如何验证这些字段。

fields: { operator: { validate: assertValueType("string") }, left: { validate: assertNodeType("Expression") }, right: { validate: assertNodeType("Expression") } }

4、Babel Generator模块

Babel 的代码生成器,它读取AST并将其转换为代码和源码映射(sourcemaps)。

generate(ast, { retainLines: false, compact: "auto", concise: false, quotes: "double", // ... }, code);

这里想不明白的是,为什么第三个参数是code,原代码的原文??

5、babel-template

是另一个虽然很小但却非常有用的模块。 它能让你编写字符串形式且带有占位符的代码来代替手动编码, 尤其是生成的大规模 AST的时候。 在计算机科学中,这种能力被称为准引用(quasiquotes)。

三  编写Babel插件

由于插件是被Babel调用的工具链上的一个步骤,所以它只关注Ast 的编辑动作即可, AST的解析与代码生成它都不必关心!所以它接收一个Babel对象作为入参,返回一个Vistor对象!

export default function(babel) {
  return {
    visitor: {
      Identifier(path, state) {}
    }
  };
};

四  转换操作

既然了解了基本概念,API和插件的写法, 那么知道我们在插件里,能怎么操作AST,怎么辗转腾挪就是重点,这些能力就决定了插件的能力!现在有很多UI框架可以适配多端平台,比如Taro,  uni之类的框架,大概都是基于这种技术实现的。针对一个框架编写的代码如何生成多端适配的代码呢,那就看一下Babel的变换能力吧!

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
可莉 可莉
3年前
18个常用 webpack插件,总会有适合你的!
!(https://oscimg.oschina.net/oscnet/71317da0c57a8e8cf5011c00e302a914609.jpg)来源| https://github.com/Michaellzg/myarticle/blob/master/webpack/Plugin何为插
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这