iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
0
Modern Web

前端工程師一起來種一棵後端技能樹吧!系列 第 28

[Day 28] 菜鳥工程師的初次開發「偽」 Open Source Project

ConsumerX

這篇文章的標題似乎跟前幾天的「菜鳥工程師的初次 Open Source Contribution」 這篇文章有點像欸!不同的是上次是去貢獻一個開源專案,這次則是要試著自己建立一個可以讓其他開發者下載來使用的開源專案。不過為什麼題目要多一個「偽」字呢?因為這次的範例我覺得不是一個真的會讓開發者想要下載來使用的 package,因此只能算是一個練習性質的 project (其實當初寫這個 package 也是為了練習剛接觸的 RxJS)。不過雖然是練習性質,我仍然列出幾個明確的目標,希望可以透過這篇文分享給大家,希望對也想自己寫一個 package 的菜鳥開發者可以有所幫助:

  • 專案建立動機
  • 明確的 README.md 文件
  • 用 TypeScript 開發並發佈成 npm package

專案動機

前陣子因緣際會的參加了線下的 RxJS 分享會,聽完對 Rx 真的充滿興趣呀,心裏想說如果有機會的話要來做個小 project 練習一下。剛好在工作上看到了專案裡有一段 code 是負責處理 client 端的圖片上傳,簡單來說就是把非同步的上傳圖片任務傳進 queue 裡面,在依排進 queue 的順序完成任務。後來想了ㄧ想覺得這個 case 其實蠻適合用 Rx 來實踐的,畢竟非同步處理就是 Rx 的強項嘛,而且剛好這段 code 有點太 specific 了(只限定丟入圖片上傳的 task),因此決定要用 RxJS 來改寫看看,希望能把最近所學應用到專案裡。

開發過程

其實開發過程還蠻有趣的,前前後後不知道改了多少次版本,一開始只想單純練習,後來突然想,那不然就試試看 publish 成一個 npm package 看看吧。

當時參考了這篇文章來將 TypeScript 的 project publish 成 npm package,雖然只是個練習用的專案,我還是希望可以模擬發佈一個真實 package 的過程,而要建立一個好專案,就需要有清楚的文件來說明專案的功能與使用方式,在 Github 上就是 README.md 檔案。我以前的 README.md 大概長這個樣子:

後來發現跟其他開源專案的 README.md 差太多了,不只資訊量不夠,也缺乏專業度,不會讓開發者想更深入了解看看,於是我 clone 了其他開源專案並研究了一下它們的 README.md,最後完成了自認還可以的文件檔(文章開頭的圖片),其中有用了一些 shield 的label 還有 fossa 檢查 dependencies 的服務,看起來又更專業了一點(誤)。

我也習慣在 README.md 中列出專案未來會新增的 feature,好督促自己未來繼續維護它,一方面也是讓使用套件的開發者知道未來可能會多哪些功能,在真的開源狀態下甚至有些開發者看到後會主動發 PR 當忙實作 feature 呢!

像上圖中打勾的 priority queue, lint-stage, prettier 都是在套件發佈後另外一一去實作的,實作新功能後再進行套件版更的工作。

小結

其實也沒什麼其他東西可以分享了,畢竟重點不是在解釋套件程式碼細節,主要是想分享這次初次 publish 成 npm package 的經驗(以前只 publish Hello World 程度的 code 過),透過這次經驗我收穫最大的地方應該是理解到 README.md 的重要,也學會參考別的專案的好文件,套用在自己的專案裡,如果對程式有興趣的讀者可以點擊下方的 github repo 連結,也可以下載來玩玩,雖然只是練習性質,不吝嗇的話還是可以給我顆星星喔!

專案 Repo

https://github.com/kylemocode/ConsumerX

Medium 版本

https://medium.com/@oldmo860617/%E8%8F%9C%E9%B3%A5%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E5%88%9D%E6%AC%A1%E9%96%8B%E7%99%BC-%E5%81%BD-open-source-project-3285e9ca35a3


上一篇
[Day 27] 高效工作術:番茄工作法
下一篇
[Day 29] Frontend ? Backend ? 如何做選擇?
系列文
前端工程師一起來種一棵後端技能樹吧!30

尚未有邦友留言

立即登入留言