由於升級了 v0.2 版 GearCase 使用打包工具從 parcel 更換成 vue-cli 3.x。因此打包後發佈 NPM 包的方式與之前有很大的差異，這也導致了在發佈完 GearCase v0.2.2 版本之後，我自己在進行 NPM / Yarn 安裝包時。根本無法通過之前文檔的方式，進行引 ...
由於升級了 v0.2 版 GearCase 使用打包工具從 parcel 更換成 vue-cli 3.x。因此打包後發佈 NPM 包的方式與之前有很大的差異，這也導致了在發佈完 GearCase v0.2.2 版本之後，我自己在進行 NPM / Yarn 安裝包時。根本無法通過之前文檔的方式，進行引入並註冊組件。後來我大概花費了兩天的時間來解決這個問題。
回顧
由於 parcel 的打包方式與 webpack 有很大的差異。並且當時還處於輪子庫 v0.1 版本，引入/註冊組件的方式也有不同。
詳情參照之前的博文Parcel 打包器簡單使用記錄
解決過程
打包方式
首先要解決是打包方式異同的問題。一開始我還是以前的思路，使用普通的 npm run build / yarn build 方式進行打包，完成之後生成了一系列文件。如下圖結構。
可以查看到的是，JS 文件目錄之下，有兩個 JS 文件，通過之前的方式。我將這兩個 JS 文件都放置到 dist目錄之下，並取名為 index.js。然後在項目的 package.json 文件中添加 "main": "dist/index.js", 後再次使用 npm bulish 上傳 NPM 包，仍舊無法按照之前文檔所寫方式(舊方式)正常引入/註冊/使用我所構建的輪子組件。
隨後在 vue cli 的官方文檔中，我找到了打包庫模式的方法。詳細文檔參考vue-cli 構建目標庫方法
按照文檔中的方法，依舊創建在 src 目錄下創建入口文件 index.js。然後通過文檔中的命令 "vue-cli-service build --target lib --name GearCase src/index.js" 進行庫方式的打包，最後生成了四個文件。目錄如下：
再查看 GearCase.umd.js 這個文件內容之後，發現這個 JS 文件就是我們所需要的（因為他是 umd 的統一模塊定義方法，可以相容所有的模塊化方式），並且相對於之前的方式，這個 JS 文件可以使用於任意環境。
什麼是 umd ?
commonJS、requireJS都是用來處理JS模塊化的，其中commonJS用來給nodejs使用（使用了module.exports的用法）。後來使用import/export來導出/引入模塊。umd是統一模塊定義方法，可以相容所有其他的模塊定義方法。
重新導出
接下來我們把所有的組件導出，並用 ES6 的簡介書寫方式使用一行代碼完成導入導出，如下圖所示。
然後再使用 "vue-cli-service build --target lib --name GearCase src/index.js" 進行庫方式打包，會發現生成的 umd.js 文件容量變大了。
一開始查看 umd.js 文件代碼之後以為是打包過程中將 Vue 引入組件的緣故，繼而導致了代碼超過了 200k。於是思考排除 Vuejs 參與打包的方法。
解決代碼體積
後來查看文檔之後，發現文檔中特意說明瞭。預設情況下，是不會讓 Vue 參與打包的。
註意對 Vue 的依賴
在庫模式中，Vue是外置的。這意味著包中不會有Vue，即便你在代碼中導入了Vue。如果這個庫會通過一個打包器使用，它將嘗試通過打包器以依賴的方式載入Vue；否則就會回退到一個全局的Vue變數。
發佈
更改 name
由於之前使用 GearCase，但大寫的文件名可能導致一些問題，所以修改為 gearcase。
更改入口文件
將之前 package.json 的 "main": "dist/index.js", 入口文件修改為 "main": "dist/gearcase.umd.min.js",。
簡化命令
在 package.json 中添加 script 快捷語法，將 "vue-cli-service build --target lib --name gearcase src/index.js" 命令簡化為 package-go。
然後使用以下命令重新打包。並生成我們最終需要的文件
yarn package-go
註意這裡的
gearcase已經在新的版本中更換為了gear-case
發佈 NPM 包
使用 npm publish 發佈 NPM 包到線上。
後續
經過以上操作。成功解決了 parcel 更換 vue-cli 3.x 之後打包生成文件上傳到 NPM 無法引入的問題。
截止到該問題解決 GearCase 版本已經升級到 v0.2.14，新的文檔正在更新中… 詳細更改說明請查閱文檔
