zhoudaiyu
V2EX  ›  Vue.js

有没有类似于 Git 的性能还可以的基于 Vue 的文本对比工具?

  •  
  •   zhoudaiyu · Aug 25, 2019 · 8412 views
    This topic created in 2636 days ago, the information mentioned may be changed or developed.

    需求是在提交前想对比当前文本和历史文本的差别( nginx 的配置文件 nginx.conf,大概以后能有一千多行吧),并把差别展示出来,就像 git commit 的时候那样。目前看有 code-diff ( https://github.com/ddchef/vue-code-diff) 和 codemirror ( https://codemirror.net/) 这两个,前者有人在 issues 里说到了大概到 2000 行的时候就会卡死;后者貌似挺老的了,不知道和 Vue 配合起来用有没有什么坑。大佬们有没有什么好的文本对比工具推荐?

    22 replies  •  2019-08-26 09:22:26 +08:00
    Rheinmetal
    Rheinmetal
    Aug 25, 2019
    1
    git diff 不够用嘛?
    hronro
    hronro
    Aug 25, 2019
    2
    系统内置的 diff 不行?
    或者可以试试这个: https://github.com/so-fancy/diff-so-fancy
    zhoudaiyu
    zhoudaiyu
    OP
    Aug 25, 2019
    3
    @Rheinmetal
    @hronro
    感谢回复。是想把对比结果展示在页面里。
    seki
    seki
    Aug 25, 2019
    4
    monaco editor 有 diff 模式
    luozic
    luozic
    Aug 25, 2019 via iPhone
    5
    对比结果展示在页面? code review 工具?
    zhoudaiyu
    zhoudaiyu
    OP
    Aug 25, 2019
    6
    @luozic 类似这种
    arrow8899
    arrow8899
    Aug 25, 2019
    7
    diff2html 可以把 git diff 结果转换成 html 展示;或者是用 google-diff-match-patch 也有 js 版的
    otakustay
    otakustay
    Aug 25, 2019
    8
    我有个 react 版本的,性能和功能方面都基本完善了,mozilla 也在用,要不用 vuera 套一下用吧
    https://github.com/otakustay/react-diff-view
    arrow8899
    arrow8899
    Aug 25, 2019
    9
    顺便说下,文本 diff 本来就很耗 CPU,量大了自然就卡,所以一般是在后端 diff,然后交给前端渲染;
    也可以直接用 bitbucket 等商业版的,用户较少时可以免费使用。
    liangkang1436
    liangkang1436
    Aug 25, 2019 via Android
    10
    idea 自带的 diff 不够用吗?
    duan602728596
    duan602728596
    Aug 25, 2019 via iPhone
    11
    我还真就写过一个,是 react 版本的
    Takamine
    Takamine
    Aug 25, 2019
    12
    Beyond Compare。
    JimmyTinsley
    JimmyTinsley
    Aug 25, 2019
    13
    phabricator
    zhoudaiyu
    zhoudaiyu
    OP
    Aug 25, 2019
    14
    @Takamine
    @liangkang1436
    是要在前端展示对比结果的
    XiaoxiaoPu
    XiaoxiaoPu
    Aug 25, 2019
    15
    写一个后端服务专门用来做 diff 嘛,前端只用来展示。看下 github.com/ddchef/vue-code-diff 的源码就知道他其实是用 www.npmjs.com/package/diff 这个库生成 diff 结果,量大的话自然会卡,把这部分用后端实现就没问题了。
    zhoudaiyu
    zhoudaiyu
    OP
    Aug 25, 2019
    16
    @XiaoxiaoPu 后端实现的话,有啥好用的 pip 包吗
    XiaoxiaoPu
    XiaoxiaoPu
    Aug 25, 2019❤️1
    17
    @zhoudaiyu 后端是 python ?那直接用标准库 difflib 就行了
    Heanes
    Heanes
    Aug 25, 2019
    18
    我也有类似需求,Mark
    weixiangzhe
    weixiangzhe
    Aug 25, 2019 via iPhone
    19
    color diff 吧
    xy2401
    xy2401
    Aug 26, 2019
    20
    vscode ( monaco ) 可以网页 上对比两个文本
    [Monaco Editor]( https://microsoft.github.io/monaco-editor/)

    Diff Editor
    Side by side live comparison

    Supports all languages out of the box
    zhjie
    zhjie
    Aug 26, 2019
    21
    战略性马克
    zhjie
    zhjie
    Aug 26, 2019
    22
    回了才记起有加入收藏...
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   975 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 52ms · UTC 22:03 · PVG 06:03 · LAX 14:03 · JFK 17:03
    ♥ Do have faith in what you're doing.