為了讓許多不同的 Vue 專案，可以共用某個 Vue 套件，發佈到 npm 後再行下載變成一種可能的方式。這篇筆記下「開發階段」、「發佈前打包測試」和「發佈階段」的一些細項。
開發階段
1. vue-sfc-rollup
運用 vue-sfc-rollup 套件，比起 webpack 或是 vue-cli 可以產生更為輕巧的檔案大小，且支援 tree-shaking。同時，你也可以藉由安裝多種套件來加上你想要的功能。如果你用過 gulp 之類的前端工具，那可以減低一些上手難度。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 1. vue-sfc-rollup 全域安裝 */ npm i -g vue-sfc-rollup /* 2. 安裝精靈，在專案根目錄的父層資料夾開始 */ sfc-init Is Single component or Library? // 選擇 Library What's the npm name? // 你要發布在 npm 的名字，這名字也會出現在 package.json Prefer Javascript or Typescript? // 選擇 TypeScript And the location? // 會額外起一個資料夾 /* 3. 資料夾結構*/ build - 內裝 roller.config.js - 打包的相關設定都在此 dev - 開發套件的呼叫環境，你可以把它想成 vue-cli 模式下的 App.vue src - 實際裝載你的 vue 套件的地方 |
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 兩個檔案要互相配合，以下是一個可以正常運行的範例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
// package.json { ......, "devDependencies": { /*僅寫出和 eslint 相關*/ "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "eslint": "^7.22.0", "eslint-plugin-vue": "^7.7.0", "vue": "^3.0.5", "vue-eslint-parser": "^7.6.0" }, "peerDependencies": { "vue": "^3.0.5" }, "engines": { "node": ">=12" } } // .eslintrc module.exports = { root: true, env: { browser: true, node: true, es6: true, }, parser: 'vue-eslint-parser', extends: [ 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended', ], parserOptions: { 'ecmaVersion': 2020, 'parser': '@typescript-eslint/parser', 'sourceType': 'module', 'extraFileExtensions': ['.vue'] }, rules: { } } |
發佈前打包測試
可以先行使用 npm pack，得到打包後的檔案，並在另一個專案中進行測試。若你輸出的檔案路徑在 C:/Users/user/Desktop，那麼你的安裝路徑就是：npm i /c/users/user/desktop/<demo File>
發佈階段
1. 註冊 npm 帳號
請上 npm 官網即可，可以視情況開啟 2FA
2. 編輯 package.json
跟記錄安裝套件相依性的是同一個 json，這邊筆記下有關的部分：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "name": "<package name>", "version": "1.0.0", "description": "<package description>", "author": "<author contact, name, ... etc>", "repository": { "type": "git", "url": "git repo address" }, "keywords": [ some keywords for searching ] } |
3. 發佈並撰寫 Readme.md
可以觀看此篇：A template to make good README.md
Q & A
1. 關於 Vue 檔中的 scope scss，無法正常編譯？
你需要在 postVue 階段呼叫轉譯的套件，節錄如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*For scss compiling*/ import autoprefixer from 'autoprefixer' import postCSS from 'postcss' import rollupPluginScss from 'rollup-plugin-scss' const baseConfig = { plugins:{ postVue: [ rollupPluginScss({ processor: css => postCSS([autoprefixer]) .process(css) .then(result => result.css), output: 'dist/vue-tw-zip-code-selector.css', }) ] } } |
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
