[Javascript AST] 1. Continue: Write a simple Babel plugin
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的更多相关文章
- [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 ...
- [Javascript AST] 4. Continue: Report ESLint error
const disallowedMethods = ["log", "info", "warn", "error", & ...
- [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 ...
- [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: ...
- 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". ...
- 从AST编译解析谈到写babel插件
之前一直在掘金上看到一些关于面试写babel插件的文章,最近也在学,以下就是学习后的总结. 关键词:AST编译解析, babel AST编译解析 AST[维基百科]:在计算机科学中,抽象语法树(Abs ...
- [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 ...
- 简单 babel plugin 开发-使用lerna 工具
babel在现在的web 应用开发上具有很重要的作用,帮助我们做了好多事情,同时又有 比较多的babel plugin 可以解决我们实际开发上的问题. 以下只是学习下如果编写一个简单的babel pl ...
- babel plugin和presets是什么,怎么用?
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/ 当开发react或者vuejs app时,开发者 ...
随机推荐
- 影响FPGA设计中时钟因素的探讨。。。转
http://www.fpga.com.cn/advance/skill/speed.htm http://www.fpga.com.cn/advance/skill/design_skill3.ht ...
- oh-my-zsh upgrade problem
Oh-My-ZSH upgrade issue with bad substitution message Any problem with automatic Oh-My-Zsh upgrade ...
- ZOJ 2588 Burning Bridges(求桥的数量,邻接表)
题目地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2588 Burning Bridges Time Limit: 5 ...
- Android控件-TabHost(一)
什么是TabHost? TabHost组件的主要功能是可以进行应用程序分类管理,例如:在用户使用windows操作系统的时候,经常见到如图所示的图形界面. TabHost选项卡,说到这个组件, ...
- VS初始化设置
来源于网上整理和 书<aps.net mvc企业级实战>中. 1.vs模版 版权注释信息 1.我的电脑上VS2015安装在D盘中,所以找的目录为:D:\Program Files (x86 ...
- FreeBSD是UNIX系统的重要分支,其命令与Linux大部分通用,少部分是其特有。
FreeBSD是UNIX系统的重要分支,其命令与Linux大部分通用,少部分是其特有. 1: man 在线查询 man ls2: ls 查看目录与档案 ls -la3: ln 建立链接文件 ln -f ...
- python pdb小结
Debug功能对于developer是非常重要的,python提供了相应的模块pdb让你可以在用文本编辑器写脚本的情况下进行debug. pdb是python debugger的简称.常用的一些命令如 ...
- ES6学习笔记(五)函数的扩展
1.函数参数的默认值 1.1基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console. ...
- uniq---报告或忽略文件中的重复行
uniq命令用于报告或忽略文件中的重复行,一般与sort命令结合使用. 语法 uniq(选项)(参数) 选项 -c或——count:在每列旁边显示该行重复出现的次数: -d或--repeated:仅显 ...
- hdu 5375 - Gray code(dp) 解题报告
Gray code Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total ...