[指南] 用 Vue-SFC-Rollup 在 NPM 發佈你的第一個 Vue 套件

章節連結

為了讓許多不同的 Vue 專案,可以共用某個 Vue 套件,發佈到 npm 後再行下載變成一種可能的方式。這篇筆記下「開發階段」、「發佈前打包測試」和「發佈階段」的一些細項。
vue typescript


開發階段

1. vue-sfc-rollup

運用 vue-sfc-rollup 套件,比起 webpack 或是 vue-cli 可以產生更為輕巧的檔案大小,且支援 tree-shaking。同時,你也可以藉由安裝多種套件來加上你想要的功能。如果你用過 gulp 之類的前端工具,那可以減低一些上手難度。

A. 在 src 內的 lib-components,裡面的 index.ts 是用來導出 vue component 給 entry.tsm 接的,如果你有要新增不同的 component ,那如法炮製在這邊宣告

B. 根據 roller.config.js 和 tsconfig.ts 的預設設定,*.ts 檔案僅用來整合既有的 *.vue ,並產生編譯後的 .js 檔。因此,你不能夠新增額外的 .ts 。
C. *.d.ts 檔的統一進入點要在 package.json 內宣告,你可以新增自己的 *.d.ts 檔。為確保相對路徑正確,建議一律引入到 package.json 所宣告的 d.ts 後,再 export 出去

D. package.json 中的 files,是用來宣告你的套件有哪些檔案要被放入。若你有自定義的 .d.ts,別忘記把它們的路徑加入

2. 搭配 ES-Lint 使用

package.json 和 .eslintrc 兩個檔案要互相配合,以下是一個可以正常運行的範例:


發佈前打包測試

可以先行使用 npm pack,得到打包後的檔案,並在另一個專案中進行測試。若你輸出的檔案路徑在 C:/Users/user/Desktop,那麼你的安裝路徑就是:npm i /c/users/user/desktop/<demo File>


發佈階段

1. 註冊 npm 帳號

請上 npm 官網即可,可以視情況開啟 2FA

2. 編輯 package.json

跟記錄安裝套件相依性的是同一個 json,這邊筆記下有關的部分:

3. 發佈並撰寫 Readme.md

可以觀看此篇:A template to make good README.md


Q & A

1. 關於 Vue 檔中的 scope scss,無法正常編譯?

你需要在 postVue 階段呼叫轉譯的套件,節錄如下:

2. d.ts 檔案的作用?

顧名思義,就是產生編寫 .ts 所需的定義檔,裏頭不能進行如同一般 .ts 檔的宣告變數並賦值。另外,若有同名的 .ts 和 .d.ts 位於同一層資料夾,則會優先讀取 .ts 。

3. 如何調整 css 編譯後的輸出路徑?

如上,新增一個 output 參數,撰寫相對路徑即可


Github / NPM

Github:Vue-tw-zip-code-selector
NPM:Vue-tw-zip-code-selector


相關連結

1. vue-sfc-rollup
2. Writing npm modules in TypeScript
3. 發佈 npm 套件 – 從手動到自動(2):手動 publish 篇
4. 我的第一個 npm 套件:把 vue component 打包到 npm 吧
5. PostCSS Readme
6. Creating a Vue module with Rollup and Typescript

按讚加入粉絲團

延伸閱讀