假如 console.log 很轻松,你会选择使用吗?

1,481 阅读3分钟

如题,笔者最近写了一个自己觉得很有意思的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…