如何透過babel去操作ast, 並生成對應的程式碼。

如何透過babel去操作ast, 並生成對應的程式碼。

修改物件名，比如Taro.xxx 修改為wx.xxx

const babel = require('@babel/core')
let traverse = require('@babel/traverse').default
const generate = require('@babel/generator').default
const types = require('@babel/types');

const code = 'wx.login();let env = wx.env'
const { ast } = babel.transformSync(code, { ast: true })
traverse(ast, {
  BlockStatement(path) {
    path.scope.rename('wx', 'ft')
  },
  Identifier(path) {
    if (path.isReferenced() && path.node.name === 'wx') {
      path.replaceWith(types.identifier('ft'))
    }
  },
})

console.log(generate(ast, {}).code)

在程式碼中插入對應的節點，比如在某個物件中插入一個屬性

const babel = require('@babel/core');
let traverse = require('@babel/traverse').default
const generate = require('@babel/generator').default
const types = require('@babel/types');

const code = 'let a = { b: 2, c: 1 }'
const { ast } = babel.transformSync(code, { ast: true })
traverse(ast, {
  ObjectExpression(path) {
    path.node.properties.push(
      types.objectProperty(
        types.identifier("d"),
        types.identifier("2")
      )
    )
  }
})
console.log(generate(ast, {}).code)

找到程式碼中的依賴檔案

const babel = require('@babel/core');
let traverse = require('@babel/traverse').default

const code = 'const demo = require("./demo"); import test from "test.js" '
const { ast } = babel.transformSync(code, { ast: true })
traverse(ast, {
  ImportDeclaration(path) {
    console.log(path.node.source.extra.rawValue)
  },
  CallExpression(path) {
    if (path.node.callee.name === 'require' && path.node.arguments) {
      console.log(path.node.arguments[0].value)
    }
  }
})

在表示式前後插入一個方法

const babel = require('@babel/core');
let traverse = require('@babel/traverse').default
const types = require('@babel/types');
const generate = require('@babel/generator').default;

const code = 'var a = 1'
const { ast } = babel.transformSync(code, { ast: true })

traverse(ast, {
  enter(path) {
    if (types.isExpressionStatement(path.node)) {
      try {
        if (path.node.expression.callee.name === 'demo') {
          return
        }
      } catch (error) {
      }
    }
    const item = types.expressionStatement(
      types.callExpression(
        types.identifier('demo'),
        [
          types.identifier(`data`),
        ]
      )
    )
    if (types.isStatement(path.node)) {
      path.insertBefore(item)
      path.insertAfter(item)
    }
  }
})
console.log(generate(ast, {}).code)

參考文件：juejin.cn/post/7045496002614132766

如果你喜歡我的作品，請考慮贊助我，以保持它們的可持續性。

本作品採用《CC 協議》，轉載必須註明作者和本文連結