console

简化项目出现多个 console.log 调试杂乱的情况

原理

1. console.log("%c some output", "color: red;") 打印字符串会带上 css 样式，易化区分；
2. vite.plugin 借助 vite 构建能力，直接从构建层面入侵代码，修改原先的 console, 使得用户不必有任何代码层面改动而享受增益效果

实现

import { type Plugin } from 'vite'

function consolePlugin(init: { scope?: boolean; content: RegExp[] }): Plugin {
	function getAdorned(
		metas: Partial<Record<'color' | 'background' | 'font-weight', string>>
	): string {
		return `'${Object.entries(metas).reduce((acc, [key, value]) => {
			acc += ` ${key}: ${value};`
			return acc
		}, 'padding: 4px;')}'`
	}
	function getScope(id: string): [string, string] {
		const value = id
			.split('/')
			.reverse()
			.slice(0, 2)
			.reverse()
			.join('/')
			.replace(/(.*)?(\?.*)/, '$1')
		return [
			`%c${value}`,
			getAdorned({ color: '#fff', background: '#428dfc', 'font-weight': 'bolder' }),
		]
	}

	return {
		name: 'consolePlugin',
		transform(code, id) {
			if (
				(id.includes('vue') ? id.includes('?') : true) &&
				init.content.some((it) => new RegExp(it).test(id))
			) {
				return code.replaceAll(/console\.log\((.*)\);?/g, (matched, p1) => {
					// 打印的是字符串，原封不动
					if (p1.startsWith(`'`)) {
						return `console.log(${p1});`
					}
					if (init.scope) {
						const [scopeValue, scopeColorful] = getScope(id)
						return `console.log('${scopeValue}%c${p1}', ${scopeColorful}, ${getAdorned({ color: '#fff', background: '#5cbf3c', 'font-weight': 'bolder' })},${p1})`
					}
					return `console.log('%c${p1}', ${getAdorned({ color: '#fff', background: '#5cbf3c', 'font-weight': 'bolder' })},${p1})`
				})
			}
		},
	}
}

使用

import { defineConfig, type Plugin } from 'vite'

export default defineConfig({
	plugins: [
		process.env.NODE_ENV === 'development' &&
		consolePlugin({
			content: [/\/apps\/admin\/src\/.*?(vue|ts|tsx)/],
			scope: true,
		}),
	],
})