發布乙個npm包 以angular為例

2021-10-03 03:30:52 字數 1175 閱讀 9930

做前端的同學和npm打交道的次數可不算少,npm上有許多好用的庫可以幫我們節省很多時間,那麼今天我們就嘗試發布乙個angular元件到npm上。

首先,我們來建立乙個angular專案,不同於平時我們使用

來建立專案,我們本次使用

ng g library npm-klx-lib --prefix=my
prefix引數是以後我們使用元件時候的字首,比如antdesign元件的nz-***。

接下來再建立乙個專案測試我們的庫

接下來我們可以修改我們的元件庫,達到我們想要的效果,我們這裡就跳過這個步驟,因為這不是重點。接下來我們build一下元件庫,在我們的測試專案中試用一下。我們執行

ng build npm-klx-test
>

my-npm-klx-lib

>

最後執行專案

ng serve npm-klx-test
我們就能在頁面上看見效果了

接下來我們把它發布到npm上。首先你需要註冊乙個npm賬號然後登陸,這一步交給大家自己去做了。

發布npm包的步驟為:

將元件庫打包

進入到dist的對應目錄下發布

我們可以在package.json中新增對應的script來完成。

"publish"

:"ng build npm-klx-lib && cd dist/npm-klx-lib && npm publish"

然後我們執行npm run publish,就能將我們的元件庫發布到npm上了。

發布成功後登陸自己的賬號,在我們發布過的包中就能找到我們發布上去的包。但是有時候剛剛發布會搜尋不到,這個具體是什麼原因導致的我也不太清楚。可能會有延時。

最後我們可以在另乙個angular專案中執行

npm i npm-klx-lib

npm發布乙個包

我們已經實現了路由的自動化構建,但是我們可以看到,一大串 懟在裡面。當然你也可以說,把它封裝在乙個js檔案裡面,然後使用require autoroute.js 給引入進來,那也行。但是,為什麼不把心放大一點呢?比如說,我們把它做成乙個npm包!最初自己做的時候就是這種直接引入封裝的js檔案裡,可以...

發布乙個npm包

我這裡是寫了乙個vue輪播圖外掛程式,因此我使用了vue的腳手架工具建立乙個專案,當然你也可以選擇自己搭建腳手架。本例中我會使用vue腳手架建立乙個專案,並發布到npm上面去。全域性安裝 首先,要建立專案,封裝vue的外掛程式用webpack 很合適,因此你需要全域性安裝 vue cli init外...

如何發布乙個 npm 包

在工作時,突然接到經理的乙個要求,需要將乙個react的高階元件函式封裝成乙個npm包。之前從沒弄過,當場還是有些懵逼的,但是這畢竟是工作,不能推脫。於是開始了學習 湯坑之旅。最終包發布,線上專案成功使用,雖然導致了一次線上故障,但還是快速地fix掉。吃一塹長一智,記錄一下整個發布的過程和遇到的一些...