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

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

Vuejs 使用 lib 庫模式打包 umd 解決 NPM 包發布的問題