gitlab-tree — gitlab代碼查看必備神器

03-30

廢話不說，先上下載鏈接：Gitlab-Tree

緣起

Gitlab作為現在互聯網企業的標配，是一款非常優秀的代碼源代碼管理工具。在日常工作中常常需要查看其他系統的代碼，有時候僅僅需要查看某個項目的某個文件，如果把整個代碼庫（repository）克隆（clone）到本地再查看並不是一個省時省力、高效率的辦法。

基於這種場景，一款可以在線查看gitlab代碼的輔助工具誕生了——gitlab-tree,簡單介紹就是可以使用樹形菜單方便的瀏覽Gitlab代碼的chrome插件。解決了需要在gitlab上查看代碼而不需要clone到本地的痛點，提高工作效率。

這款插件以樹形菜單的形式展示當前瀏覽的代碼倉庫的目錄結構，當用戶點擊到二級目錄或更深層次的目錄時，可以自動展開樹形菜單的節點；如果點擊代碼文件，可以以無刷新頁面的方式在右側區域展示當前代碼文件的內容，並進行代碼高亮。

實現方案

使用gitlab瀏覽代碼遇到層級過深的項目時，文件切換會很浪費時間。如果能夠在用戶瀏覽代碼時自動出現一個工具，這個工具有樹形列表目錄，可以展開或收起節點，同時點擊文件名可以在右側代碼區域展示文件內容，並且進行高亮顯示，最好頁面不要有刷新操作，減少用戶等待時間。這樣的話可以節省很多時間。

基於此決定使用：

樹形菜單使用jstree.js構建；
由於邏輯不太複雜，所以使用jquery作為dom操作的類庫；
使用nprogress.js增加進度條和loading效果；
使用highlight.js進行代碼高亮顯示；
使用HTML5的history pushState、replaceState保持URL同步變換；
基於Chrome extention開發模式，最終發布到Chrome web store上供用戶安裝使用。

前端技術選型上不困難，難點在於需要通過Gitlab API獲取項目結構、文件內容等數據。這就需要去看gitlab的API文檔。

比如：這個 https://docs.gitlab.com/ce/api/repositories.html#list-repository-tree 介面可以獲取repo的樹形結構；還有很多其他功能的介面，可以獲取分支、tag、commit，甚至創建文件、提交Merge Request等大家有興趣的話自己可以研究一下。

開發完成後使用了gulp作為代碼壓縮打包工具，最後將再zip包上傳到google chrome web store。

更多細節，可以查看在 Github 上的源代碼：https://github.com/FrankFan/gitlab-tree 。

下一步計劃

作為個人業餘項目，目前也有超過1200+個用戶。除了我自己的需求以外，還有好多來自社區的意見，比如現在呼聲較高的是增加對 gitlab10.x 的支持，可以考慮以後版本中加上這個功能。

個人精力有限，難免會有bug，如果大家在使用的過程中發現任何問題，歡迎和我聯繫。