[Javascript AST] 0. Introduction: Write a simple BabelJS plugin

標籤：function   write   app   elf   node   visitor   net   can   undefined   

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 === barfunction foo(foo, bar) { foo === bar;}

 

We want to trasnform the code which highlighted in foo() function to:

_foo === _bar

 

Notice that, we also have ‘foo === bar‘ which is not inside foo() function. But we don‘t want to touch that.

To get started, we have code below:

export default function(babel) {  const { types: t } = babel;  return {    name: "add_underscore",    visitor: {      // your code here    }  };}

All the code is under ‘visitor‘ prop. 

By hightlight the code we can see, it is a ‘BinaryExpression‘:

 

 

So we focus on ‘BinaryExpression‘:

export default function(babel) {  const { types: t } = babel;  return {    name: "add_underscore",    visitor: {      BinaryExpression(path) {      }    }  };}

‘path‘ param contains all the information we need.

 

If add a console.log() inside BinarayExpression() function, we can see two logs, one is from global scope, another one is from ‘foo()‘ scope. We only want to get one from foo() function scope:

The way to do is check ‘path.scope.block.type‘, which is current code‘ block scope.

‘foo === bar‘ exisits on global belongs to ‘Program‘:

the one exists in foo() belongs to ‘BlockStatement‘:

BinaryExpression(path) {
        // remove global one        if (path.scope.block.type === "Program") {          return;        }}

 

 

And the opreator we want to check is ‘===‘:

      BinaryExpression(path) {        if (path.scope.block.type === "Program") {          return;        }        if (path.node.operator !== "===") {          return;        }
     }

 

Now we have located the one ‘foo === bar‘ we want, we can start to replace the name:

export default function(babel) {  const { types: t } = babel;  return {    name: "add_underscore",    visitor: {      BinaryExpression(path) {        if (path.scope.block.type === "Program") {          return;        }        if (path.node.operator !== "===") {          return;        }        // locate the ‘foo‘ and ‘bar‘        // as left and right Identifier        const leftIdentifier = path.node.left;        const rightIndentifier = path.node.right;        // generate a new identifier        const newLeftIdentifier = path.scope.generateUidIdentifier(leftIdentifier.name);        const newRightIdentifier = path.scope.generateUidIdentifier(          rightIndentifier.name        );        // replace the old with new one        path.node.left = t.identifier(newLeftIdentifier.name);        path.node.right = t.identifier(newRightIdentifier.name);      }    }  };}

 

 

Now the generate code looks like:

var foo = ‘o‘var bar = ‘o‘foo === barfunction foo(foo, bar) { _foo === _bar;}

The code have successfully transform to ‘_foo === _bar‘.

But clearly the code won‘t work, because _foo and _bar is undefined.

We need to update the params in the function as well.

        // update params in the function        const [fooParam, barParam] = path.scope.block.params;        fooParam.name = t.identifier(newLeftIdentifier.name).name;        barParam.name = t.identifier(newRightIdentifier.name).name;

 

All Code:

export default function(babel) {  const { types: t } = babel;  return {    name: "add_underscore",    visitor: {      BinaryExpression(path) {        if (path.scope.block.type === "Program") {          return;        }        if (path.node.operator !== "===") {          return;        }        // locate the ‘foo‘ and ‘bar‘        // as left and right Identifier        const leftIdentifier = path.node.left;        const rightIndentifier = path.node.right;        // generate a new identifier        const newLeftIdentifier = path.scope.generateUidIdentifier(leftIdentifier.name);        const newRightIdentifier = path.scope.generateUidIdentifier(          rightIndentifier.name        );        // replace the old with new one        path.node.left = t.identifier(newLeftIdentifier.name);        path.node.right = t.identifier(newRightIdentifier.name);        // update params in the function        const [fooParam, barParam] = path.scope.block.params;        fooParam.name = t.identifier(newLeftIdentifier.name).name;        barParam.name = t.identifier(newRightIdentifier.name).name;      }    }  };}

 

 

[Notice]: this is a just learning note for myself. The approache might not be optimal. 

[Javascript AST] 0. Introduction: Write a simple BabelJS plugin