babel实战（一）：日志打印时进行代码定位

最新推荐文章于 2023-03-07 10:21:02 发布

YoRHa_6BZ

最新推荐文章于 2023-03-07 10:21:02 发布

阅读量361

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44800563/article/details/125623631

版权

本文介绍了如何使用babel在console.log等API中自动插入文件名和行列号，以帮助开发者更好地进行代码定位。通过解析源码为AST，然后利用@babel/traverse遍历并修改AST，最终生成目标代码。在AST Explorer中观察console.log的结构，确定处理条件，实现功能。

摘要由CSDN通过智能技术生成

babel 能够自动在 console.log 等 api 中插入文件名和行列号的参数

源代码如下：

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

const sourceCode = `
    console.log(1);

    function func() {
        console.info(2);
    }

    export default class Clazz {
        say() {
            console.debug(3);
        }
        render() {
            return <div>{co