本文介紹了自定義vue組件發(fā)布到npm的方法，分享給大家，具體如下：

為什么會(huì)有這個(gè)想法呢，主要是vue項(xiàng)目中自定義的組件在多個(gè)項(xiàng)目中使用。導(dǎo)致修改bug的時(shí)候，總是要在項(xiàng)目分支中修改，然后同步到主線上，這樣容易導(dǎo)致分支修改后沒(méi)有同步到主線，慢慢的就會(huì)導(dǎo)致組件版本不統(tǒng)一，而導(dǎo)致升級(jí)組件很繁瑣，最后可能都要去維護(hù)多個(gè)組件的不同版本，這樣不是我們想要的。

所以就打算將組件打包發(fā)布到npm上，每個(gè)項(xiàng)目中只需要在package.json中修改組件版本即可同步最新版本。

組件發(fā)布?xì)v程

1、開始對(duì)打包不是很了解，只是簡(jiǎn)單的將原有.vue文件以及相關(guān)的css、image資源進(jìn)行提取，然后放到一個(gè)項(xiàng)目下，下面是發(fā)布組件到npm的詳細(xì)步驟：

（1）新建組件項(xiàng)目，通過(guò)npm init來(lái)初始化一個(gè)package.json文件
（2）將提取出來(lái)的組件放到項(xiàng)目路徑。
（3）在package.json所在目錄，執(zhí)行npm adduser。這里需要注冊(cè)npm帳號(hào)
（4）然后要求輸入用戶名、密碼、注冊(cè)時(shí)填的郵箱。如圖：

（5）然后輸入npm publish即可。

如果不出以外，組件就已經(jīng)發(fā)布成功了，可以通過(guò)npm install xxxx來(lái)進(jìn)行安裝了。

2、在使用過(guò)程中發(fā)現(xiàn)了一些小問(wèn)題。由于當(dāng)時(shí)在index.js中使用了es6的部分語(yǔ)法（如：數(shù)組的map、const），導(dǎo)致在低版本ie中會(huì)報(bào)錯(cuò)，雖然可以通過(guò)修改js來(lái)解決。但是作為一個(gè)有理想有抱負(fù)的碼農(nóng)，這種事情不能忍，因?yàn)橄雃lement-ui這些組件都是可以將.vue文件打包之后發(fā)布的。然后就想著也要弄好了。

3、然后就開始研究怎么能通過(guò)import xx from xxx即可實(shí)現(xiàn)加載打包后的js。通過(guò)查找資料，發(fā)現(xiàn)是通過(guò)package.json中有個(gè)main屬性來(lái)設(shè)置加載js的路徑。如圖：

4、加載問(wèn)題解決了，剩下就是打包問(wèn)題了。由于打包需要一些webpack的配置，所以直接用vue-cli初始化了一個(gè)工程，對(duì)其中的webpack進(jìn)行調(diào)整。主要是去掉build中打包配置文件webpack.prod.conf.js，這里去掉HtmlWebpackPlugin等。

https://github.com/myGitZone/mapModule 這里是示例，該項(xiàng)目只是一個(gè)demo。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論