[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时,开发者 ...
随机推荐
- HIToj--1076--Ordered Fractions(水题)
Ordered Fractions Source : Unknown Time limit : 3 sec Memory limit : 32 M Submitted : 1510, Ac ...
- 关于checkbox的一些jquery操作
表单在前端开发中是经常会遇到的,其中自然也少不了checkbox复选框,对于复选框的操作无外乎有以下三种:全选,全不选,反选.下面零度逍遥就给大家分析分析. 一.checkbox全选 大家都知道选择c ...
- 超级硬件代理解决企业Web提速上网问题
超级硬件代理解决企业Web提速上网问题 需求分析: XX集团是五家企业重组建立的特大型工程勘察设计咨询企业,下设10多个分公司,上网人数众多.有多台WEB server,对外服务,访问量及大.以前无论 ...
- Linux常用音乐播放器
1.Rhythmbox是一个音乐播放和管理应用,GNOME桌面环境自带,它可以播放各种音频格式的音乐管理收藏的音乐.同时还具有音乐回放.音乐导入.刻录音频CD.显示专辑封面.显示歌词.DAAP共享等功 ...
- 【Codeforces Round #459 (Div. 2) B】 Radio Station
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用map模拟一下映射就好了. [代码] #include <bits/stdc++.h> using namespace ...
- [Python] Python list slice syntax fun
# Python's list slice syntax can be used without indices # for a few fun and useful things: # You ca ...
- jquery14 on() trigger() : 事件操作的相关方法
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- SQL查询表中的用那些索引
方法1. 使用系统表 -- 查询一个表中的索引及索引列 USE AdventureWorks2008 GO SELECT indexname = a.name , tablename = c. n ...
- Android 学习笔记之Bitmap位图的缩放
位图的缩放也可以借助Matrix或者Canvas来实现. 通过postScale(0.5f, 0.3f)方法设置旋转角度,然后用createBitmap方法创建一个经过缩放处理的Bitmap对象,最后 ...
- 完整性检查工具Nabou
完整性检查工具Nabou 650) this.width=650;" onclick="window.open("http://blog.51cto.com/viewpi ...