Loading comments...Loading comments...
發布一個 npm 組件
一直希望能做公有組件並考慮上傳 npm ,
想了一個一直想做而且頗鬧的題目來實作😂
上傳圖片後可以轉化成文字顯示畫上 Canvas。
設立目標
想實作的方式,列下幾種必須達到的 Goal
- 必須透過 Vue3 Typescript 實作
- 必需使用自動化流程版號
- package.json 的各項值設定
- 簡單好玩的程式實作
遇到挑戰
實際上實作時卻發現...
Typescript 環境設定
- 起初不熟悉 Typescript 各種 .json 的後綴檔案代表的意義,熟悉了一陣子,後來才理解 tsconfig.app.json 「app」 為代表管理的環境,app 為應用、node 為後端建構等等。並統一在 tsconfig.json 中參考,以便 Ts 編譯器可以知道使用的環境。
有些雷真的是踩過才知道😭
bundler 的設定及輸出
本來以為打包只需要設定好輸出就好了吧,照著網路上的教學及文件,應該能簡單的上線😊,結果自己還是太年輕了。 要設定 package.json vite.config,有一個很重要的提醒
"author": "一定要是本人且正確", <== publish 快一小時懷疑人生的時候,發現改這個就過了👼
npm 上版失敗
這真的是這次實作最痛最哭的部分,因為網路上的資源都寫 npm publish 就好,但實際是若啟用 auth 認證,就必須實作 git action 的 secrets token,然後要複製 .npmrc 指向路徑,並且要把 org 設置好,不然就會上板上到歪頭。
release 版號問題
release 自動化也是,我猜考了 vue/core 的上版流程,使用 .husky pre-commit pre-push 作用如名,在 commit push 之前先去做我寫好的指令。
- pre-commit 檢查 commit 是否有按照規則
- pre-push 執行 auto update release version
github actions yml 的撰寫
因為之前就有在寫類似的 pipeline 倒是簡單的參考一下別下的 CI/CD,
學習結論
實際走過一次流程後發現,做自己的第三方插件好像也沒那麼難,而且看到下載量真的有點嚇到的感覺,想說只是跑個流程的專案居然有 500 下載量,但星星倒是沒人按哈哈哈哈哈, 之後會真的想想實際的需求後再繼續我的插件之旅~寫個後端相關的好像也可以👍