We want to write a Babel Plugin, which move 'const versionRegex = /(/d+)\.(/d+)\.(/d+)/gi' out of function scope and put it into global scope.

Code:

function getVersion(versionString) {
const versionRegex = /(\d+)\.(\d+)\.(\d+)/gi
var x = /foo/.text('thing')
const [, major, minor, patch] = versionRegex.exec(versionString)
return {major, minor, patch}
}

AST:

export default function (babel) {
const { types: t } = babel; return {
name: "ast-transform", // not required
visitor: {
RegExpLiteral(path) {
// We only want to locate
// const versionRegex = /(\d+)\.(\d+)\.(\d+)/gi
// NOT
// var x = /foo/.text('thing')
// for versionRegex, because it is a VariableDeclarator, it has init prop
// for /foo/, it is under MemeberExpression's object prop
if(path.parentKey !== 'init') {
return;
} // Now we locate const versionRegex = /(\d+)\.(\d+)\.(\d+)/gi
// we want to generate a unqi id for id
const program = path.find(parent => parent.isProgram())
const variableDeclarator = path.find(parent => parent.isVariableDeclarator())
const variableDeclaration = path.find(parent => parent.isVariableDeclaration())
const {
node: {
id: {name: originalName}
}
} = variableDeclarator
const newName = program.scope.generateUidIdentifier(originalName)
console.log(variableDeclaration)
// rename the versionRegex
path.scope.rename(newName.name, originalName) // move the regex out of function scope
// create new versionRegex variable out of function scope
// and assign the value to it
const newVariableDeclaration = t.variableDeclaration(variableDeclaration.node.kind, [
t.variableDeclarator(newName, path.node)
])
program.node.body.unshift(newVariableDeclaration)
// last remove the old one
variableDeclarator.remove() }
}
};
}

[Javascript AST] 1. Continue: Write a simple Babel plugin的更多相关文章

  1. [Javascript AST] 0. Introduction: Write a simple BabelJS plugin

    To write a simple Babel plugin, we can use http://astexplorer.net/ to help us. The plugin we want to ...

  2. [Javascript AST] 4. Continue: Report ESLint error

    const disallowedMethods = ["log", "info", "warn", "error", & ...

  3. [Javascript AST] 3. Continue: Write ESLint rule

    The rule we want to write is show warning if user using console method: // valid foo.console() conso ...

  4. [Javascript AST] 2. Introduction: Write a simple ESLint rule

    What we want to do is checking if user write nested if statements which actually can combine to one: ...

  5. An internal error occurred during: "Requesting JavaScript AST from selection". GC overhead limit exc

    1.错误描述 An internal error occurred during: "Requesting JavaScript AST from selection".     ...

  6. 从AST编译解析谈到写babel插件

    之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...

  7. [AST Babel Plugin] Transform code, add line:column number for console log

    For example we have current code: function add(a, b) { console.log(a, b) return a + b } function sub ...

  8. 简单 babel plugin 开发-使用lerna 工具

    babel在现在的web 应用开发上具有很重要的作用,帮助我们做了好多事情,同时又有 比较多的babel plugin 可以解决我们实际开发上的问题. 以下只是学习下如果编写一个简单的babel pl ...

  9. babel plugin和presets是什么,怎么用?

    https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...

随机推荐

  1. html2canvas截取页面

    1.下载html2canvas.js 2.引入 3.修改html2canvas支持远程图片处理 function ImageContainer(src, cors) { this.src = src; ...

  2. poj--1459--Power Network(最大流,超级源超级汇)

    Power Network Time Limit: 2000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u Submit ...

  3. 分享一段官date函数用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 【MySQL主从复制原理及搭建全过程】

    目录 准备工作 主从复制原理 开始搭建主从复制 本文将使用mariaDB数据库实现主从复制,其步骤与MySQL数据库无差异. MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护, ...

  5. crawlspider抽屉爬取实例+分布

    创建项目 scrapy startproject choutiPro 创建爬虫文件  scrapy genspider -t crawl chouti www.xxx.com 进入pycharm 培训 ...

  6. 紫书 习题 10-18 UVa 10837 (欧拉函数变形)

    这道题很巧妙,要把式子变一下 phi(n) = n * (1 - 1 / p1) * (1 - 1 / p2)--(1 - 1 / pr) = n * ((p1-1) / p1) * ((p1-2) ...

  7. H+后台主题UI框架---整理

    本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...

  8. vs平台 error link:2019

    需要XXX.lib或XXX.dll库.手动添加,项目->属性->配置属性->链接器->输入 然后在附件依赖项添加XXX.lib,再生成第一个无法解析的外部符号错误消失了.

  9. 剑指offer_面试题6_重建二叉树(分解步骤,逐个击破)

    题目:输入某二叉树的前序遍历和中序遍历的结果.请重建出该二叉树.如果输入的前序遍历和中序遍历的结果中都不含反复的数字. 比如:输入前序遍历 {1,2,4,7,3,5,6,8} 和中序遍历序列 {4,7 ...

  10. Gonet2 游戏server框架解析之Agent(3)

    客户端消息在Agent中的预处理流程. Agent定义好的三种请求: //api.go var RCode = map[int16]string{ 0: "heart_beat_req&qu ...