[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时,开发者 ...
随机推荐
- TFRecord —— tensorflow 下的统一数据存储格式
tensorflow 提供了统一的数据存储格式,即 TFRecord(record 表示记录),以提高程序的可扩展性,当数据来源十分复杂时,仍能有效记录输入数据中的信息. 1. tfrecord 使用 ...
- 《TensorFlow学习指南深度学习系统构建详解》英文PDF+源代码+部分中文PDF
主要介绍如何使用 TensorFlow 框架进行深度学习系统的构建.涉及卷积神经网络.循环神经网络等核心的技术,并介绍了用于图像数据和文本序列数据的模型.给出了分布式深度学习系统在TensorFlow ...
- 2017-2018年红头发新版Cisco认证网络工程师(CCNA-R&S)全新讲解分享
网名"红头发",多年授课经验,业内资深思科认证讲师,其所写的CISCO认证原创技术文章风靡各大网站与培训机构.精通CISCO各类路由交换产品,熟悉JUNIPER M/T系列路由产品 ...
- 紫书 例题 9-5 UVa 12563 ( 01背包变形)
总的来说就是价值为1,时间因物品而变,同时注意要刚好取到的01背包 (1)时间方面.按照题意,每首歌的时间最多为t + w - 1,这里要注意. 同时记得最后要加入时间为678的一首歌曲 (2)这里因 ...
- Swift学习笔记(13)--属性 (Properties)
普通属性用var和let即可,本文不做详述 1.延迟存储属性 延迟存储属性是指当第一次被调用的时候才会计算其初始值的属性.在属性声明前使用@lazy来标示一个延迟存储属性. class DataImp ...
- Swift学习笔记(7)--控制流
1.For循环 //1.条件递增 for var index = 0; index < 3; ++index { println("index is \(index)") } ...
- 零基础学python-7.6 字符串格式化表达式
字符串格式化同意在一个单个的步骤中对一个字符串运行多个特定类型的替换 特别是给用户提示的时候,格式化很方便 实现方法: 1.格式化表达式,类似于c语音的printf 在表达式中,我们使用%二进制操作符 ...
- List与array的相互转换
1.List->Array 调用List的toArray方法 List<String> list = new ArrayList<String>(); list.add( ...
- 关于bootstrap IE8的兼容性问题
非常久没有写技术类的文章了.这几天在用bootstrap来做我们站点的UI框架,感觉还是不错的.只是遇到一点不大不小的问题,那就是有朋友在IE8下訪问我们的站点.界面变成了跟手机浏览一样的界面. 后来 ...
- Mysql第八天 分区与分表
分区表 主要提供例如以下的特性,或者适合如此场景: 数据量非常大, 或者仅仅有表中最后的部分有热点数据.其它均为历史数据 分区表数据更easy维护,能够对独立的分区删除等操作 分区表的数据能够分布在不 ...