关于前端:偏爱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 的时候：

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

即源码不做任何批改：

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

因为之前有过 babel 插件的教训，所以想着这次持续通过写一个 babel plugin 实现以上性能，所以也就有了 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',
    ...
  ],
  }
}

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

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

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 插件，性能包含：

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

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

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

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

前言

babel-plugin-enhance-log

options

实现思路

总结

最初