由於升級了 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

隨後在 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，新的文件正在更新中… 詳細更改說明請查閱文件