关于前端:偏爱consolelog的你肯定会觉得这个插件泰裤辣

前言

毋庸置疑，要说前端调试代码用的最多的，必定是console.log，尽管我当初 debugger 用的比拟多，但对于生产环境、小程序真机调试，还是须要用到 log 来查看变量值，比方我下午遇到个场景：抉择完客户后返回页面，依据条件判断是否弹窗：

if (global.isXXX || !this.customerId || !this.skuList.length) return

// 到了这里才会执行弹窗的逻辑

这个时候只能真机调试，看控制台打印的值是怎么的，但对于下面的条件，如果你这样 log 的话，那控制台只会显示：

console.log(global.isXXX, !this.customerId, !this.skuList.length)
false false false

且如果参数比拟多，你可能就没法立刻将 log 出的值对应到相应的变量，还得回去代码外面认真比对。

还有一个，我之前遇到过一个我的项目里一堆 log，共事为了不便看到 log 是在哪一行，就在 log 的中央加上代码所在行数，但因为 log 那一刻曾经硬编码了，而代码常常会增加或者删除，这个时候行数就不对了：

比方你下面增加了一行，这里的所有行数就都不对了

所以，我心愿 console.log 的时候：

1. 控制台被动打印源码所在行数
2. 变量名要显示进去，比方下面例子的 log 应该是 global.isXXX = false !this.customerId = false !this.skuList.length = false
3. 能够的话，每个参数都有分隔符，不然多个参数看起来就有点不好分辨

即源码不做任何批改：

而控制台显示所在行，且有变量名的时候增加变量名前缀，而后你能够指定分隔符，如换行符\n：

因为之前有过 babel 插件的教训，所以想着这次持续通过写一个 babel plugin 实现以上性能，所以也就有了 babel-plugin-enhance-log，那到底怎么用？很简略，上面 👇🏻 我给大家说说。

babel-plugin-enhance-log

老规矩，先装置插件：

pnpm add babel-plugin-enhance-log -D
# or
yarn add babel-plugin-enhance-log -D
# or
npm i babel-plugin-enhance-log -D

而后在你的 babel.config.js 外面增加插件：

module.exports = (api) => {
  return {
    plugins: [
    'enhance-log',
    ...
  ],
  }
}

看到了没，就是这么简略，之后再重新启动，去你的控制台看看，小火箭咻咻咻为你刷起~

options

下面理解了根本用法后，这里再给大家说下几个参数，能够看下正文，应该说是比较清楚的：

interface Options {
  /**
   * 打印的前缀提醒，这样不便疾速找到 log 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
   * @example
   * console.log('line of 1 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀', ...)
   */
  preTip?: string
  /** 每个参数分隔符，默认空字符串，你也能够应用换行符 \n，分号；逗号，甚至猪猪🐖都行~ */
  splitBy?: boolean
  /** 
   * 是否须要 endLine
   * @example
   * console.log('line of 1 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀', ..., 'line of 10 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀')
   *  */
  endLine?: boolean
}

而后在插件第二个参数配置即可（这里偷偷跟大家说下，通过 /** @type {import('babel-plugin-enhance-log').Options} */ 能够给配置增加类型提醒哦）：

return {
    plugins: [['enhance-log', enhanceLogOption],
      ],
      ...
  }

比如说，你不喜爱小 🚀，你喜爱猪猪 🐖，那能够配置 preTip 为 🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖：

比如说，在参数较多的状况下，你心愿 log 每个参数都换行，那能够配置 splitBy 为 \n：

或者分隔符是;:

当然，你也能够随便指定，比方用个狗头🐶来分隔：

又比如说，有个 log 跨了多行，你心愿 log 开始和完结的行数，两头是 log 实体，那能够将 endLine 设置为 true：

咱们能够看到开始的行数是 13，完结的行数是 44，跟源码统一

实现思路

下面通过多个例子跟大家介绍了各种玩法，不过，我置信还是有些小伙伴想晓得怎么实现的，那我这里就大抵说下实现思路：

老规格，还是通过 babel-ast-explorer 来查看

1. 判断到 console.log 的 ast，即 path 是 CallExpression 的，且 callee 是 console.log，那么进入下一步

2. 拿到 console.log 的 arguments，也就是 log 的参数

3. 遍历 path.node.arguments 每个参数

• 字面量的，则毋庸增加变量名
• 变量的，增加变量名前缀，如 a =
• 如果须要分隔符，则依据传入的分隔符插入到原始参数的前面

4. 拿到 console.log 的开始行数，创立一个蕴含行数的 StringLiteral，同时加上 preTip，比方下面的 🚀🚀🚀🚀🚀🚀🚀，或者 🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖，而后 unshift，放在第一个参数的地位

5. 拿到 console.log 的完结行数，过程跟第 4 点相似，通过 push 放到最初一个参数的地位

6. 在这过程中须要判断到解决过的，下次进来就要跳过，避免反复增加

以下是源码的实现过程，有趣味的能够看看：

import {declare} from '@babel/helper-plugin-utils'
import generater from '@babel/generator'
import type {StringLiteral} from '@babel/types'
import {stringLiteral} from '@babel/types'


const DEFAULT_PRE_TIP = '🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀'
const SKIP_KEY = '@@babel-plugin-enhance-logSkip'

function generateStrNode(str: string): StringLiteral & {skip: boolean} {const node = stringLiteral(str)
  // @ts-ignore
  node.skip = true
  // @ts-ignore
  return node
}

export default declare<Options>((babel, { preTip = DEFAULT_PRE_TIP, splitBy = '', endLine = false}) => {const { types: t} = babel
  const splitNode = generateStrNode(splitBy)
  return {
    name: 'enhance-log',
    visitor: {CallExpression(path) {const calleeCode = generater(path.node.callee).code
        if (calleeCode === 'console.log') {
          // add comment to skip if enter next time
          const {trailingComments} = path.node
          const shouldSkip = (trailingComments || []).some((item) => {return item.type === 'CommentBlock' && item.value === SKIP_KEY})
          if (shouldSkip)
            return

          t.addComment(path.node, 'trailing', SKIP_KEY)

          const nodeArguments = path.node.arguments
          for (let i = 0; i < nodeArguments.length; i++) {const argument = nodeArguments[i]
            // @ts-ignore
            if (argument.skip)
              continue
            if (!t.isLiteral(argument)) {if (t.isIdentifier(argument) && argument.name === 'undefined') {nodeArguments.splice(i + 1, 0, splitNode)
                continue
              }
              // @ts-ignore
              argument.skip = true
              const node = generateStrNode(`${generater(argument).code} =`)

              nodeArguments.splice(i, 0, node)
              nodeArguments.splice(i + 2, 0, splitNode)
            }
            else {nodeArguments.splice(i + 1, 0, splitNode)
            }
          }
          // the last needn't split
          if (nodeArguments[nodeArguments.length - 1] === splitNode)
            nodeArguments.pop()
          const {loc} = path.node
          if (loc) {
            const startLine = loc.start.line
            const startLineTipNode = t.stringLiteral(`line of ${startLine} ${preTip}:\n`)
            nodeArguments.unshift(startLineTipNode)
            if (endLine) {
              const endLine = loc.end.line
              const endLineTipNode = t.stringLiteral(`\nline of ${endLine} ${preTip}:\n`)
              nodeArguments.push(endLineTipNode)
            }
          }
        }
      },
    },
  }
})

对了，这里有个问题是，我通过标记 path.node.skip = true 来跳过，然而还是会屡次进入：

if (path.node.skip) return
path.node.skip = true

所以最终只能通过尾部增加正文的形式来防止屡次进入：

有晓得怎么解决的大佬还请提醒一下，万分感激~

总结

国际惯例，咱们来总结一下，对于生产环境或真机调试，或者对于一些偏爱 console.log 的小伙伴，咱们为了更快在控制台找到 log 的变量，通常会增加 log 函数，参数变量名，但前者一旦代码地位更改，打印的地位就跟源码不统一，后者又得反复写每个参数变量名的字符串，显得相当的麻烦。

为了更不便地应用 log，咱们实现了个 babel 插件，性能包含：

1. 主动打印行数
2. 能够依据集体爱好加上 preTip，比方刷火箭 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀，或者可恶的小猪猪 🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖
3. 同时，对于有变量名的状况，能够加上变量名前缀，比方 const a = 1, console.log(a) => console.log(‘a = ‘, a)
4. 还有，咱们能够通过配置 splitBy、endLine 来自主抉择任意分隔符、是否打印完结行等性能

最初

不晓得大家有没有在追不良人，我是从高三追到当初。明天是周四，不良人第六季也靠近序幕了，那就谨以此文来留念不良人第六季的完结吧~

好了，再说一句，如果你是个偏爱 console.log 的前端 er，那请你喊出：泰裤辣（逃~）