如题,笔者最近写了一个自己觉得很有意思的Babel插件,babel-plugin-pretty-console
,目的是让 console
使用的更加轻松和易于管理,其实很久以前就借用 webpack
的插件实现过一个版本,不过那时写的代码是真的粗鄙不堪(笔者自我感觉进步了一点点),实现功能也基本上靠代码堆砌token
解析实现;
最近借助 Babel
对于 AST
的解析功能,写了这么一个插件,主要就是把你不想写不想删的 console.log
帮你做了而已,核心代码不超过 50 行。
是什么
是一个 console
语句的代理工具,普通的console
输出方式
function add(a, b) {
console.log('a', a)
console.log('b', b)
return a + b;
}
使用插件后
// #
function add(a, b) {
return a + b;
}
/**
* 相当于这样
*/
function add(a, b) {
console.log('add:a', a)
console.log('add:b', b)
return a + b;
}
相当于在你的函数注释上加一个特殊标识符 #
,插件会自动帮你转换为 console
,如果你的函数本身就有注释,写法可能是这样
// # 这是一个加法函数
function add(a, b) {
return a + b;
}
/**
* 相当于这样
*/
function add(a, b) {
console.log('这是一个加法函数:a', a)
console.log('这是一个加法函数:b', b)
return a + b;
}
如果你不想使用 console.log
,你可以在标识符后面添加 console
中包含的方法以切换,如
// #warn 这是一个加法函数
function add(a, b) {
return a + b;
}
/**
* 相当于这样
*/
function add(a, b) {
console.warn('这是一个加法函数:a', a)
console.warn('这是一个加法函数:b', b)
return a + b;
}
目前可以Hook的语法
使用方法如上,非常简单,插件目前可以对大多数函数声明,函数赋值,变量声明,变量赋值进行 Hook
// #
let a = 1
// 等同于
let a = 1
console.log('a', a)
// 变量赋值也一样
// #
a = add(1, 2)
// 等同于
a = add(1, 2)
console.log('a', a)
// 需要注意的是,如果变量指向的是一个箭头函数的声明,那么默认会按照函数的方式进行解析,如
// #
a = (p1, p2) => p1 + p2
// 等同于
a = (p1, p2) => {
console.log('a:p1', p1)
console.log('a:p2', p2)
return p1 + p2
}
当然,也可以对函数进行 Hook
// # The function to say hi
function sayHi(name) {
return `Hi! ${name}`
}
// 等同于
function sayHi(name) {
console.log('The function to say hi:name', name)
return `Hi! ${name}`
}
你可以把它用在几乎所有的变形体上,🌰 ,提供一些常见的写法
let obj = {
// #warn
add1: (a, b) => {
return a + b
},
// #error
add2(a, b) {
return a + b
}
}
class Preson {
// # 获得身高
getHeight: (offset = 5) => {
return 175 + offset
}
// #
sayName(name) {
return `My name is ${name}`
}
}
// #
export default function add(p1, p2) {
return a + b;
}
// #log ZHUANGBI
export const name = genName(name) {
return `爱新觉罗 ${name}`
}
你也可以将其用于 Typescipt 文件中
// #
function add(a: number, b:number):number {
return a + b
}
或者简单的 Vue
声明周期输出
<template>
<div></div>
</template>
<script>
export default {
// #
created() {}
// #
mounted() {}
// #
updated() {}
}
</script>
如果你需要在 Promise
或者其他回调函数中使用,你需要这样
getUserInfo().then(res => { // # 用户信息
// do some
})
// 不过这样的格式通常会被 ESLint 或者 Prettier 格式化掉,所以试试这样
getUserInfo().then((res/* # 用户信息 */) => {
// do some
})
安装一下
npm install babel-plugin-pretty-console
在你的 .babelrc
文件中这样使用
{
plugins: ['pretty-console']
}
你还可以通过一些个性化设置来教我做事,如
{
plugins: [
['pretty-console', {
token: '$', // 替换掉默认的 # 符号
open: true, // 是否开启这个插件,可以根据 process.env 来实现生产环境不开启
printFileName: false // 打印当前的文件名,默认打印全路径,还没优化,不太想优化,感觉没啥用
}]
]
}
总结
如上,就是这个插件的主要功能了,使用起来有些炫酷,还可以装逼,也是笔者平日自得其乐的一些小玩意,觉得有意思的话,不妨点个赞少侠。
GitHub: github.com/TaroXin/bab…