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:

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

AST:

  1. export default function (babel) {
  2. const { types: t } = babel;
  3.  
  4. return {
  5. name: "ast-transform", // not required
  6. visitor: {
  7. RegExpLiteral(path) {
  8. // We only want to locate
  9. // const versionRegex = /(\d+)\.(\d+)\.(\d+)/gi
  10. // NOT
  11. // var x = /foo/.text('thing')
  12. // for versionRegex, because it is a VariableDeclarator, it has init prop
  13. // for /foo/, it is under MemeberExpression's object prop
  14. if(path.parentKey !== 'init') {
  15. return;
  16. }
  17.  
  18. // Now we locate const versionRegex = /(\d+)\.(\d+)\.(\d+)/gi
  19. // we want to generate a unqi id for id
  20. const program = path.find(parent => parent.isProgram())
  21. const variableDeclarator = path.find(parent => parent.isVariableDeclarator())
  22. const variableDeclaration = path.find(parent => parent.isVariableDeclaration())
  23. const {
  24. node: {
  25. id: {name: originalName}
  26. }
  27. } = variableDeclarator
  28. const newName = program.scope.generateUidIdentifier(originalName)
  29. console.log(variableDeclaration)
  30. // rename the versionRegex
  31. path.scope.rename(newName.name, originalName)
  32.  
  33. // move the regex out of function scope
  34. // create new versionRegex variable out of function scope
  35. // and assign the value to it
  36. const newVariableDeclaration = t.variableDeclaration(variableDeclaration.node.kind, [
  37. t.variableDeclarator(newName, path.node)
  38. ])
  39. program.node.body.unshift(newVariableDeclaration)
  40. // last remove the old one
  41. variableDeclarator.remove()
  42.  
  43. }
  44. }
  45. };
  46. }

[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. Python(五) 包、模块、函数与变量作用域

    一.while循环与使用场景 CONDITION=1 while CONDITION <=5 : CONDITION +=1 print("hello") else: pri ...

  2. css3 实现加载滚动条效果

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

  3. WebAssembly学习(四):AssemblyScript - 结构体系与内置函数

    一.结构体系 1.编译 编译器的结构相对保守. 提供源文件,其文本被标记化并解析为抽象语法树. 这里执行语法级检查. 一旦解析了所有引用的源文件,就构造一个程序并从AST初始化. 在这里进行合理性检查 ...

  4. debian8平滑升级到debian9

    本文在Creative Commons许可证下发布. 首先,在升级时可以查看一下自己的版本号: uname -a ##查看内核信息 cat /etc/issue ##查看发行版本号   方法1:利用网 ...

  5. iOS 的组件化开发

    在一个APP开发过程中,如果项目较小且团队人数较少,使用最基本的MVC.MVVM开发就已经足够了,因为维护成本比较低. 但是当一个项目开发团队人数较多时,因为每个人都会负责相应组件的开发,常规开发模式 ...

  6. this对象的理解

    (回答一:) (1).js的this指向是不确定的,也就是说是可以动态改变的.call/apply 就是用于改变this指向的函数,这样设计可以让代码更加灵活,复用性更高 (2).this 一般情况下 ...

  7. 【Codeforces Round #424 (Div. 2) C】Jury Marks

    [Link]:http://codeforces.com/contest/831/problem/C [Description] 有一个人参加一个比赛; 他一开始有一个初始分数x; 有k个评委要依次对 ...

  8. 一种基于RGB空间的对照度增强的filter

    今天看前辈博客的时候看到一种新的基于RGB颜色空间的image contrast enhance filter 流浪的鱼link: http://blog.csdn.net/jia20003/arti ...

  9. 使用PHP来压缩CSS文件

    这里将介绍使用PHP以一种简便的方式来压缩你的CSS文件.这种方法不需要命名你的.css文件和.php文件. 当前有许多方法需要将.css文件重命名成.php文件,然后在所有PHP文件中放置压缩代码. ...

  10. Typedef和#define之间的区别

    Typedef和define都可以用来给对象取一个别名,但是两者却有着很大不同. 1. 首先,二者执行时间不同 关键字typedef在编译阶段有效,由于是在编译阶段,因此typedef有类型检查的功能 ...