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. .Net中字典的使用

    /// <summary> /// 获取用户市信息 /// </summary> /// <param name="CustomerId">&l ...

  2. linux log日志解析

    linux log日志解析   其实,可以说成是监控系统的记录,系统一举一动基本会记录下来.这样由于信息非常全面很重要,通常只有 root 可以进行视察!通过登录文件(日志文件)可以根据屏幕上面的错误 ...

  3. 关于vue中的语法糖v-model

    开发src-在线系统的过程中,封装了很多组件,如Dialog prompt等,在开源项目的组件中这些组件使用v-model来控制显示,我来总结一下关于自己学习到的v-model知识 1. 使用prop ...

  4. 14.c语言dll注入

    #include <Windows.h> //dll不需要main函数 //导出接口 _declspec(dllexport) void go() { MessageBoxA(, ); }

  5. POJ2823 单调队列

    POJ2823 http://poj.org/problem?id=2823 最基础的单调队列,说是数据结构,其实就是一种更新数组数据的方法. 之前还准备用deque,超时了,直接head,tail快 ...

  6. 解决The requested resource is not available的办法

    1.问题描述: eclipse中使用tomcat来运行HelloWorld时出现The requested resource is not available. 在报错中有一行Setting prop ...

  7. Tomcat部署项目修改浏览器上猫咪头像

    一.发现问题用tomcat部署项目,在浏览器标签也上发现了tomcat猫咪图.要把这个图修改掉. 二.解决问题apache-tomcat-5.5.28\webapps\ROOT下的ico文件,将需要替 ...

  8. SQL函数-str()

    1 str()函数用于将数值类型数据转换未字符类型. 2 str()函数语法 select str(数字类型的表达式[,表达式总长度][,小数点后面的位数]) 表达式总长度和小数点后面的位数为可选择参 ...

  9. c#同步上下文SynchronizationContext学习笔记

    提供在各种同步模型中传播同步上下文的基本功能.同步上下文的工作就是确保调用在正确的线程上执行. 同步上下文的基本操作 Current 获取当前同步上下文 var context = Synchroni ...

  10. Json数据的序列化与反序列化的三种经常用法介绍

    下面内容是本作者从官网中看对应的教程后所做的demo.其体现了作者对相关知识点的个人理解..作者才疏学浅,难免会有理解不到位的地方.. 还请各位读者批判性对待... 本文主要介绍在Json数据的序列化 ...