Babel 插件开发&访问节点实例详解

目录
  • 访问节点
    • 获取子节点的Path：
    • 检查节点的类型：
    • 检查路径（Path）类型：
    • 检查标识符（Identifier）是否被引用：
    • 找到特定的父路径：
    • 获取同级路径：
    • 停止遍历：

访问节点

获取子节点的Path：

我们在处理节点的属性之前必须要拿到节点对象才能进行操作，我们使用path.node.property来访问属性~

BinaryExpression(path) {
  path.node.left;
  path.node.right;
  path.node.operator;
}

我们还可以使用 path 内置的 get 函数来指定属性名获取属性值~

BinaryExpression(path) {
  path.get('left');
}
Program(path) {
  path.get('body.0');
}

检查节点的类型：

检查节点的类型我们可以使用内置的工具类函数isXxx()~

BinaryExpression(path) {
  if (t.isIdentifier(path.node.left)) {
    // ...
  }
}

我们在检查类型的时候还可以顺便检查其中的某些属性是否达到预期~

BinaryExpression(path) {
  if (t.isIdentifier(path.node.left, { name: "n" })) {
    // ...
  }
}
// 简化前的代码
BinaryExpression(path) {
  if (
    path.node.left != null &&
    path.node.left.type === "Identifier" &&
    path.node.left.name === "n"
  ) {
    // ...
  }
}

检查路径（Path）类型：

路径具有相同的方法检查节点的类型~

BinaryExpression(path) {
  if (path.get('left').isIdentifier({ name: "n" })) {
    // ...
  }
}
// 等价于
BinaryExpression(path) {
  if (t.isIdentifier(path.node.left, { name: "n" })) {
    // ...
  }
}

检查标识符（Identifier）是否被引用：

Identifier(path) {
  if (path.isReferencedIdentifier()) {
    // ...
  }
}
// 或者
Identifier(path) {
  if (t.isReferenced(path.node, path.parent)) {
    // ...
  }
}

找到特定的父路径：

向上查找特定节点可以使用~

path.findParent((path) => path.isObjectExpression());

如果也需要遍历当前节点~

path.find((path) => path.isObjectExpression());

查找最接近的父函数或程序~

path.getFunctionParent();

向上遍历语法树，直到找到在列表中的父节点路径~

path.getStatementParent();

获取同级路径：

如果一个路径是在一个 Function／Program中的列表里面，它就有同级节点。

  • 使用path.inList来判断路径是否有同级节点，
  • 使用path.getSibling(index)来获得同级路径,
  • 使用 path.key获取路径所在容器的索引,
  • 使用 path.container获取路径的容器（包含所有同级节点的数组）
  • 使用 path.listKey获取容器的key

这些API用于 babel-minify 中使用的 transform-merge-sibling-variables 插件.

var a = 1; // pathA, path.key = 0
var b = 2; // pathB, path.key = 1
var c = 3; // pathC, path.key = 2

export default function({ types: t }) {
  return {
    visitor: {
      VariableDeclaration(path) {
        // if the current path is pathA
        path.inList // true
        path.listKey // "body"
        path.key // 0
        path.getSibling(0) // pathA
        path.getSibling(path.key + 1) // pathB
        path.container // [pathA, pathB, pathC]
      }
    }
  };
}

停止遍历：

当我们遍历完成目的后应该尽早结束而不是继续遍历下去~

BinaryExpression(path) {
  if (path.node.operator !== '**') return;
}

如果您在顶级路径中进行子遍历，则可以使用2个提供的API方法~

path.skip()跳过遍历当前路径的子路径~

path.stop()完全停止遍历~

outerPath.traverse({
  Function(innerPath) {
    innerPath.skip(); // if checking the children is irrelevant
  },
  ReferencedIdentifier(innerPath, state) {
    state.iife = true;
    innerPath.stop(); // if you want to save some state and then stop traversal, or deopt
  }
});

以上就是Babel 插件开发&访问节点实例详解的详细内容，更多关于Babel 插件开发访问节点的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 通过babel操作AST精准插入配置代码全流程

    通过babel操作AST精准插入配置代码全流程

    目录 babel修改js配置文件实现原理 操作AST三大阶段 解析(parser) 转换(traverse) 生成(generator) babel修改js配置文件实现原理 像那些js配置文件,里面可能有很多的非配置代码,而且一次可能要修改好几个文件 比如我们在前端项目,要插入一个页面,需要修改router.menus等配置文件,还要手动拷贝页面模板等等 这些高重复机械化操作,人工修改非常容易出错 我们可以直接用babel来操作AST抽象语法树,通过工程化去精准修改.让babel去帮我们找到指定

  • 让 babel webpack vue 配置文件支持智能提示的方法

    让 babel webpack vue 配置文件支持智能提示,下面给大家介绍的非常详细,一起看看吧 如果非脚手架搭建的项目,往往需要手动配置 babel webpack. 每次都要打开官网,复制黏贴,然后一个一个配置. 如果配置也能智能提示,岂不美哉. babel 配置 如果原先是 .babelrc 配置,请改成 .babelrc.js 或者 babel.config.js 然后安装依赖 npm i -D @types/babel__core 或 yarn add -D @types/babel

  • react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

    目录 react项目升级报错,babel报错,.babelrc配置兼容问题 遇到问题 最终解决方案 react运行报错TypeError 现记录一下思路 react项目升级报错,babel报错,.babelrc配置兼容问题 由于开发环境和项目版本的兼容问题,尝试升级了react-scripts后,一大堆问题接踵而至,翻遍了百度和csdn,往往解决了旧的又出现新的,或者开发没问题而打包时报错,现罗列一下遇到的主要问题和最终解决方案,以供参考. 遇到问题 digital envelope routi

  • vue-cli脚手架的.babelrc文件用法说明

    虽然es6还没被浏览器全部支持,但是使用es6是大势所趋,所以babel应运而生将es6代码转换成浏览器能够识别的代码 什么是.babelrc文件呢? 熟悉linux的同学一定知道,rc结尾的文件通常代表运行时自动加载的文件,配置等等,类似bashrc,zshrc 这个文件是用来设置转码的规则和插件 vue-cli脚手架的.babelrc文件 { // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel

  • React 项目迁移 Webpack Babel7的实现

    不久前写了一篇webpack 4 升级迁移 这里简单说下 React 项目的一些配置: 首先我们新建项目 react-web ,然后进入项目初始化 package.json : cd react-web && npm init 接下来我们安装 webpack,这里需要注意一点,是命令行已经单独提取出来了,我们不仅需要安装 webpack 还需要安装 webpack-cli. npm i webpack webpack-cli --save-dev 接下来我们开始安装和 react 相关的依

  • Node.js基础模块babel使用详解

    Node.js基础模块babel使用详解

    目录 安装配置 使用babel 实际例子 类的转化 babel-polyfill 前言: 由于ES6到ES7增加了很多新的语法,新特性的出现使得大家都希望通过新语法来提升自身的开发效率,但在之前的最新的node可能也没有百分之百的支持ES2017的新特性,而且开发者在开发环境和生产环境中的版本一般是不同的,所以新特性的代码可能不能完美的运行在线上环境中,为了解决难题,babel提供一系列的api来将新特性的语法转化成低版本环境中能够运行的代码 安装配置 babel是由一系列的组件构成,所以我们在

  • Babel 插件开发&访问节点实例详解

    目录 访问节点 获取子节点的Path: 检查节点的类型: 检查路径(Path)类型: 检查标识符(Identifier)是否被引用: 找到特定的父路径: 获取同级路径: 停止遍历: 访问节点 获取子节点的Path: 我们在处理节点的属性之前必须要拿到节点对象才能进行操作,我们使用path.node.property来访问属性~ BinaryExpression(path) { path.node.left; path.node.right; path.node.operator; } 我们还可以

  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (

  • Java访问数据库实例详解

    Java访问数据库实例详解

    JAVA程序想要访问数据库,需要进行如下准备: 1.安装一个数据库(这里使用mysql免安装版)2.下载该数据库的驱动包(这里使用mysql官方提供的mysql-connector-java-5.1.39-bin) PS:我的这个免安装的MySQL不知道为什么存储的中文都是乱码,参考了别人的解决方案修改了my-default.ini文件也不行,如果各位看到这篇文章的大佬有解决办法,还请不吝赐教,感谢! 一.启动数据库 将mysql免安装压缩包解压到某目录下双击 mysql-5.6.24-win3

  • java 使用JDBC构建简单的数据访问层实例详解

    本教程的目的是使用Java编写的分离的层去访问数据库中的表,这一层通常称为数据访问层(DAL) 使用DAL的最大好处是通过直接使用一些类似insert()和find()的方法简化了数据库的访问操作,而不是总是先做链接,再执行一些查询. 该层在其内部处理所有与数据库相关的调用和查询. 创建数据库 我们希望为用户创造一个简单的表,我们可以使用这些字段来创建 id        int name      varchar(200) password  varchar(200) age       in

  • python xml.etree.ElementTree遍历xml所有节点实例详解

    python xml.etree.ElementTree遍历xml所有节点 XML文件内容: <students> <student name='刘备' sex='男' age='35'/> <student name='吕布' sex='男' age='38'/> <student name='貂蝉' sex='女' age='22'/> </students> 代码: #-*- coding: UTF-8 -*- # 从文件中读取数据 imp

  • Java类的继承实例详解(动力节点Java学院整理)

    Java类的继承实例详解(动力节点Java学院整理)

    一.你了解类吗? 在Java中,类文件是以.java为后缀的代码文件,在每个类文件中最多只允许出现一个public类,当有public类的时候,类文件的名称必须和public类的名称相同,若不存在public,则类文件的名称可以为任意的名称(当然以数字开头的名称是不允许的). 在类内部,对于成员变量,如果在定义的时候没有进行显示的赋值初始化,则Java会保证类的每个成员变量都得到恰当的初始化: 1)对于  char.short.byte.int.long.float.double等基本数据类型的

  • Java构造方法实例详解(动力节点java学院整理)

    Java构造方法实例详解(动力节点java学院整理)

    构造函数是一种特殊的函数.其主要功能是用来在创建对象时初始化对象, 即为v对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中.构造函数与类名相同,可重载多个不同的构造函数.在JAVA语言中,构造函数与C++语言中的构造函数相同,JAVA语言中普遍称之为构造方法. 使用构造器时需要记住: 1.构造器必须与类同名(如果一个源文件中有多个类,那么构造器必须与公共类同名) 2.每个类可以有一个以上的构造器 3.构造器可以有0个.1个或1个以上的参数 4.构造器没有返回值 5.构造器总是伴随

  • php 访问oracle 存储过程实例详解

    php 访问oracle 存储过程实例详解 比如我的本地Oracle数据库有一个package,里面有一个存储过程: create or replace package PKG_TRANS_REL is -- Author : test -- Created : -- Purpose : test -- Public type declarations PKG_NAME varchar2(20) := 'PKG_TRANS_REL'; --存储过程,测试用 procedure pro_GC_wi

  • Linux使用Node.js建立访问静态网页的服务实例详解

    Linux使用Node.js建立访问静态网页的服务实例详解 一.安装node.js运行所需要的环境,:http://www.jb51.net/article/79536.htm 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.js var http = require('http'); var fs = require('fs');//引入文件读取模块 var documentRoot = '/node/www';//需要访问的文件的存放目录 var

  • Linux Nginx 配置SSL访问实例详解

    Linux Nginx 配置SSL访问实例详解 生成证书 可以通过以下步骤生成一个简单的证书: 首先,进入你想创建证书和私钥的目录,例如: $ cd /usr/local/nginx/conf 创建服务器私钥,命令会让你输入一个口令: $ openssl genrsa -des3 -out server.key 1024 创建签名请求的证书(CSR): $ openssl req -new -key server.key -out server.csr 在加载SSL支持的Nginx并使用上述私钥

随机推荐