[AST Babel] Create a simple babel plugin

时间:2021-07-16 22:05:15

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 )/
      }
    }
  };
}