V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lyc575757
V2EX  ›  分享创造

一个增强 console.log 可读性的 Vite 插件

  •  
  •   lyc575757 · 2023-05-16 09:52:43 +08:00 · 2907 次点击
    这是一个创建于 541 天前的主题,其中的信息可能已经有所发展或是发生改变。

    logo

    这是一个增强 console.log 可读性的 Vite 插件,将console.log所在的文件名,行号,变量名以更醒目的方式显示,并针对不同的文件类型有不同的背景色高亮.

    使用方法:

    # npm
    npm install -D vite-plugin-turbo-console
    # yarn
    yarn add -D vite-plugin-turbo-console
    # pnpm
    pnpm i -D vite-plugin-turbo-console
    

    vite.config.ts

    import { defineConfig } from "vite";
    import TurboConsole from "vite-plugin-turbo-console";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [TurboConsole()],
    });
    

    GitHub 仓库地址: https://github.com/yuyinws/vite-plugin-turbo-console

    第 1 条附言  ·  2023-05-17 09:29:25 +08:00
    已经使用 AST 实现重构了代码逻辑,欢迎大家使用
    15 条回复    2023-05-16 17:14:54 +08:00
    shakukansp
        1
    shakukansp  
       2023-05-16 10:01:18 +08:00
    在 main.js 里面 console.log(NDataTable);
    报错 Uncaught TypeError: console.log(...) is not a function
    at main.ts:20:1
    lyc575757
        2
    lyc575757  
    OP
       2023-05-16 10:07:04 +08:00
    @shakukansp 能否提供一下 main.js 的完整代码,我自己试了一下是没问题
    ![image-20230516100614973]( https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/05/upgit_20230516_1684202775.png)

    ![image-20230516100644651]( https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/05/upgit_20230516_1684202804.png)
    weixiangzhe
        3
    weixiangzhe  
       2023-05-16 10:07:33 +08:00
    有 proxy 对象直接转 plain 对象的实现吗,现在 console ref 对象看得我头疼
    shakukansp
        4
    shakukansp  
       2023-05-16 10:13:48 +08:00
    @lyc575757
    https://stackoverflow.com/questions/31013221/typeerror-console-log-is-not-a-function

    console.log(NDataTable);

    ;((NDataTable as any).props as DataTableProps).scrollbarProps = {
    trigger: 'none',
    };

    不报错

    console.log(NDataTable);

    ((NDataTable as any).props as DataTableProps).scrollbarProps = {
    trigger: 'none',
    };

    去掉括号前的 ; 号,报错
    lyc575757
        5
    lyc575757  
    OP
       2023-05-16 10:17:39 +08:00
    @weixiangzhe https://juejin.cn/post/7141188229822152735 看看这个能否解决你的问题
    yuoooo
        6
    yuoooo  
       2023-05-16 10:39:11 +08:00
    我来试试
    lyc575757
        7
    lyc575757  
    OP
       2023-05-16 10:56:50 +08:00
    @shakukansp 确实是 stackoverflow 里说的那个问题,不加分号,esbuild 在解析代码的时候会把 2 行合成 1 行,导致报错了

    ![image-20230516105029122]( https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/05/upgit_20230516_1684205429.png)
    lisongeee
        8
    lisongeee  
       2023-05-16 11:06:20 +08:00
    解析代码不用 AST 反而用正则表达式,你这 bug 有点多啊,

    看了一下思路,简单按行分割代码,然后替换 /^\s*console\.log\([^\)]*\)\s*;?\s*$/

    多行注释内的 console.log ,多行字符串内部的 console.log 会被替换,这是明显的 bug

    ```js
    console
    .log(xxx);

    const x = console.log(xxx)
    ```

    这种该替换的代码却没有替换

    这种用 vite 插件自带的 this.parse 搭配 acorn-walk + magic-string

    思路是找到所有 符合条件的 CallExpression ,判断一下内部满足 console.log(xxx) 这种 AST

    然后使用 magic-string 替换 arguments 生成 sourcemap

    最好判断一下上下文有没有覆盖 console 变量,有覆盖则不替换
    lyc575757
        9
    lyc575757  
    OP
       2023-05-16 11:33:03 +08:00
    @lisongeee 感谢反馈,用正则实现确实存在很多问题,一开始想的是使用 babel 的 parse 但是遇到很多问题,原来 vite 自带就有 parse 方法,我用你的思路再实现一下
    lsymy
        10
    lsymy  
       2023-05-16 11:37:37 +08:00
    star ,不错的想法。等修完 bug 试用下:)
    himself65
        11
    himself65  
       2023-05-16 12:36:03 +08:00
    这个 idea 不错,我提出几个建议:

    1. 用 SWC 或者 babel 实现
    2. 自定义 transform 的函数,因为实际生产环境大都是包装了一层 console.log ,比如( npm/debug 之类的)
    liangtao927190
        12
    liangtao927190  
       2023-05-16 13:15:43 +08:00
    @weixiangzhe https://www.jianshu.com/p/859435d97e90 开启浏览器的这个功能,ref 就会显示的比较舒服。
    weixiangzhe
        13
    weixiangzhe  
       2023-05-16 15:43:13 +08:00
    @lyc575757
    @liangtao927190
    好的类,学习了
    lyc575757
        14
    lyc575757  
    OP
       2023-05-16 16:51:33 +08:00
    @lisongeee 大佬再请教个问题,在 Vue SFC 文件中,我的这个插件运行是在 vite-plugin-vue 之后,此时原来的 Vue 文件中的 console.log 行号很可能在编译过程中发生了变化,如何能获取到原始的行号呢?

    ![image-20230516164821722]( https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/05/upgit_20230516_1684226901.png)

    ![image-20230516165046351]( https://cdn.jsdelivr.net/gh/yuyinws/static@master/2023/05/upgit_20230516_1684227046.png)
    lisongeee
        15
    lisongeee  
       2023-05-16 17:14:54 +08:00
    > 如何能获取到原始的行号

    可以根据 sourcemap 获取当前行数对应的原始行数
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4120 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 10:15 · PVG 18:15 · LAX 02:15 · JFK 05:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.