How to implement a tracking log output location plugin?

Summary content

• Environment construction
• Implementation steps
• Summarize

Achieve the effect

Often we console.log to print the log. If the editor does not support it well, then the print log does not know which file and which line is printed, so we need to know which file and which line the log is printed in, and finally achieve the effect As shown below

Environment setup

• Initialize project npm init -y
• Install dependencies npm install @babel/core @babel/preset-env @babel/types babel-loader webpack webpack-cli -D
• Create directories and pack files

• configure webpack.config.js

Analyze the AST of the code

Look at console.log(“sum: sdf”); what it looks like when converted to AST. In order to see more clearly, we check all the buttons above to make AST look simpler and clearer

Console output log format

• Case 1: console.log(“sum: sdf”);

• Case 2: console.log(“sum: sdf”,”123");

• Case 3: console.log(“123”,”sum: sdf” + “sdf”);

Adjust the AST syntax tree

According to the AST structure of various output console formats, compare and see how to adjust the AST

According to the above AST analysis, we have the idea of ​​​​implementing, which is not to find the log method in the console, and then add a parameter at the end of the argument to spell the log output source code file and output function.

Implement the plugin

Summarize

• Check the AST structure first, and then compare the AST structure to get AST adjustment ideas
• Combining debugging + official documentation to achieve functional details Source code portal: 04-traceLogPos

References

• astexplorer.net
• 835447-babel-javascript-source-file-line-number-macro
• babel-types#stringliteral

Above: If you find any problems, please leave a message and point it out, and I will correct it in time

Thanks for reading, welcome to follow me for more technical articles