首页 前端知识 使用babel检查和添加代码

使用babel检查和添加代码

2024-07-08 09:07:54 前端知识 前端哥 131 191 我要收藏

前提了解:

babel是干啥用的?

babel就是个js编译器,可以用来实现代码检查、代码生成、自定义语法等功能。

AST又是什么,长什么样子?

ast是用来表示代码结构的一种树结构,可以借助网页AST Explorer输入代码查看对应的ATS树。

正片开始:

步骤一:源代码解析成AST抽象语法树

使用@babel/parser将源代码解析成AST树

const parser = require('@babel/parser')

const originCode = fs.readFileSync(path, 'utf-8')
const ast = parser.parse(oldCode, {
            sourceType: 'unambiguous',
            plugins: ['jsx', 'decorators-legacy', 'classProperties', 'typescript']
        })

参数详细说明:官网文档babel-parser

步骤二:对AST树进行遍历

使用@babel/traverse对AST树进行遍历

const traverse = require('@babel/traverse')

traverse.default(ast, visitor) // visitor为对ast节点处理的babel插件

遍历的每个节点都会丢给visitor去处理

步骤三:编写babel插件visitor

代码检查例如

const visitor_check = {
    // 标签里属性的类型为JSXAttribute会触发执行
    JSXAttribute(path) {
        if (_targetEvent.includes(path.node.name.name)) {
            const expressionBody = safeProp(path, 'node', 'value', 'expression', 'body', 'body') || []
            const flag = expressionBody.some(
                element => safeProp(element, 'expression', 'callee', 'name') === 'autoTrack'
            )
            if (!flag) {
                console.log('缺少埋点->', _curPath)
                process.exit(1)
            }
        }
    }
}

找到目标所在位置,然后判断。

代码添加例如

const types = require('@babel/types')

const visitor_add = {
    JSXAttribute(path) {
        if (_targetEvent.includes(path.node.name.name)) {
            const expressionBody = safeProp(path, 'node', 'value', 'expression', 'body', 'body') || []
            const flag = expressionBody.some(
                element => safeProp(element, 'expression', 'callee', 'name') === 'autoTrack'
            )
            if (!flag) {
                const expressionStatement = types.expressionStatement(
                    types.callExpression(types.identifier('autoTrack'), [
                        types.stringLiteral('autoTrack_event'),
                        types.stringLiteral('autoTrack_label')
                    ])
                )
                path.node.value?.expression?.body?.body?.unshift(expressionStatement) &&
                    _addImportPathList.push(_curPath)
            }
        }
    }
}

找到要添加的位置,通过@babel/types调用节点类型同名的方法创建该类型的节点,鼠标放到名字上会有提示传入什么样的参数。创建后加进去即可。

最后一步:将此时的AST树生成目标代码

const generator = require('@babel/generator')

const newCode = generator.default(ast)
fs.writeFileSync(path, newCode.code)
childProcess.execSync(`npx prettier --write ${path}`) // 把格式还原

通过@babel/generator将ast转变成代码,ok,万事大吉。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13892.html
标签
babel
评论
发布的文章

html左右两栏布局实现

2024-08-04 00:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!