AST抽象语法树,实现报错定位loader

生活中,最使人疲惫的往往不是道路的遥远,而是心中的郁闷;最使人痛苦的往往不是生活的不幸,而是希望的破灭;最使人颓废的往往不是前途的坎坷,而是自信的丧失;最使人绝望的往往不是挫折的打击,而是心灵的死亡。所以我们要有自己的梦想,让梦想的星光指引着我们走出落漠,走出惆怅,带着我们走进自己的理想。

导读:本篇文章讲解 AST抽象语法树,实现报错定位loader,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

通过以下代码可以帮助我们实现代码报错定位文件与行数

1、index.js入口文件

// 将代码转为ast语法书
const parser = require('@babel/parser')
// 节点遍历
const traverse = require('@babel/traverse').default
// 将语法树生成回代码
const generator = require('@babel/generator').default
// 处理txs代码
const types = require('@babel/types')
// 读取文件
const fs = require('fs')
const fileName = 'sourse.tsx'

// 读取文件
const sourse = fs.readFileSync(__dirname + '/' + fileName).toString()
// 转换ast
const ast = parser.parse(sourse, {
    plugins: ['typescript', 'jsx']
})
console.log('ast:', ast);

// 节点遍历
traverse(ast, {
    // 访问者
    CallExpression(path) {
        const calleeStr = generator(path.node.callee).code
        if (['console.log', 'console.error'].includes(calleeStr)) {
            const { line, column } = path.node.loc.start
            path.node.arguments.unshift(types.stringLiteral(`${fileName}(${line},${column})`))
        }
    }
})
const code = generator(ast)

2、source.txt文件

console.log(1);

function log(): number {
  console.debug("before");
  console.error(2);
  console.debug("after");
  return 0;
}
log();

class Foo {
  bar(): void {
    console.log(3);
  }
  render(): string {
    return "";
  }
}

3、实现效果
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/137367.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!