[AST Babel] Create a simple babel plugin

For example, we have the source code:

getVersison(‘3.4.5‘)

function getVersion(versionString) {
    const versionRegex = /(\d)\.(\d)\.(\d+)/
    const [, major, minor, patch] = versionRegex.exec(versionString)
    return {major, minor, patch}
}

We want to transform it into:

const _versionRegex = /(\d)\.(\d)\.(\d+)/;
getVersison(‘3.4.5‘)

function getVersion(versionString) {
    const [, major, minor, patch] = _versionRegex.exec(versionString)
    return {major, minor, patch}
}

Babel plugin:

export default function (babel) {
  const { types: t } = babel;

  return {
    name: "ast-transform", // not required
    visitor: {
      RegExpLiteral(path) {
        const name = path.parent.id.name; //versionRege
        const newIdentifier = path.scope.generateUidIdentifier(name) // _versionRegex
        const variableDeclaration = t.variableDeclaration(‘const‘, [
            t.variableDeclarator(newIdentifier, path.node)
        ]) // const _versionRegex = /(\d)\.(\d)\.(\d+)/;

        console.log(variableDeclaration)

        /*
        - const [, major, minor, patch] = versionRegex.exec(versionString)
        + const [, major, minor, patch] = _versionRegex.exec(versionString)
        */
        path.scope.rename(name, newIdentifier.name)

        const program = path.findParent(
         t.isProgram
        )

        console.log(program.node.body)

        program.node.body.unshift(variableDeclaration) // + const _versionRegex = /(\d)\.(\d)\.(\d+)/;

        path.parentPath.remove() // - const versionRegex = /(\d)\.(\d)\.(\d+)/
      }
    }
  };
}

原文地址:https://www.cnblogs.com/Answer1215/p/12332952.html

时间: 2024-08-13 15:05:13

[AST Babel] Create a simple babel plugin的相关文章

[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(

[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 write is: var foo = 'o' var bar = 'o' foo === bar function foo(foo, bar) { foo === bar; } We want to trasnform the code which highlighted in foo() fu

ActiveMQ(5.10.0) - Configuring the simple authentication plug-in

The easiest way to secure the broker is through the use of authentication credentials placed directly in the broker’s XML configuration file. Such functionality is provided by the simple authentication plug-in that’s part of ActiveMQ. The following l

Artix-7 50T FPGA试用笔记之Create a simple MicroBlaze System

前言:之前笔者的试用博文提到安富利这块板子非常适合MicroBlaze开发,同时网上关于MicroBlaze的资料非常少(或含糊不清),没有一篇能完整介绍VIVADO SDK的设计流程,所以笔者带来这篇博文以供参考. 实验平台:Avnet-Artix-7 50T 开发套件/其它硬件也可以EDK:Vivado 2015.2SDK:Xilinx SDK 2015.2 实验内容:创建一个简单的MicroBlaze,实现板上LED流水灯和串口功能. 实验步骤:(一)        EDK部分1.    

[Tools] Create a Simple CLI Tool in Node.js with CAC

Command-line tools can help you with all sorts of tasks. This lesson covers the very basics of setting up a CLI tool in Node.js by creating your project with npm, setting up your bin script, and using CAC to parse a single argument. Create a new proj

create a simple COM object

[Javascript AST] 2. Write a simple ESLint rule

What we want to do is checking if user write nested if statements which actually can combine to one: // BAD if (a) { console.log("a"); } else { if (b) { console.log("b"); } } // GOOD if (a) { console.log("a"); } else if (b) {

Babel(抽象语法树,又称AST)

文章:https://juejin.im/post/5a9315e46fb9a0633a711f25 https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md 你了解过Babel吗? 了解过抽象语法树,又称AST,有学习过,也写过一个基于AST的乞丐版模板引擎,先是词法解析token,然后生产抽象语法树,然后更改抽象语法树,当然这是插件做的事情,最后根据新的A

[AST Babel] Add function name into the console log 'path.findParent(t.isFunctionDeclaration)'

Continue with the previous post: https://www.cnblogs.com/Answer1215/p/12337243.html What we want to do in this post, is adding parent function name into the console log as well: Previous output is : function add(a, b) { console.log("2:4", a, b)