發布自己的npm組件庫

  • 2022 年 7 月 27 日
  • 筆記

發布自己的npm組件庫

前期準備

**git上建立自己的倉庫，這樣子是為了在本地初始化時，可以直接生成對應的 package.json **
image
image

克隆倉庫

創建倉庫成功後，gitbush本地，執行 git clone giturl
git蠻人性化的，在空倉庫中有命令行提示，不懂得可以直接複製在本地執行
克隆成功後，假設現在，我是安裝在D盤的 D:\ReactLearn\person 目錄下，在該目錄執行cmd打開命令行工具，針對於winodws用戶，mac請自行打開命令行

初始化項目

初始化npm項目

在打開的命令行工具中執行 npm init -y -y 的意思是npm所詢問的問題，默認都選擇 y 初始化項目成功後，會發現 package.json 的名字默認就是git倉庫的名稱，這也是為什麼初期要建立倉庫的原因。

引入組件開發文檔工具

對於自己的組件庫，自然需要有文檔供其他人的查閱與使用，這裡選擇 dumi 框架作為組件開發文檔的框架，dumi中我們只需要專註組件功能與邏輯的開發，文檔都是配置生成的，如果有其他的框架取代，後續涉及dumi的知識可以略過，dumi其實只是懶於寫文檔的一種捷徑罷了，與發npm包其實沒直接關係

初始化dumi項目

在 D:\ReactLearn\person 中執行 yarn create @umijs/dumi-lib --site site代表使用dumi的文檔形式，這裡注意，dumi的使用node版本必須是 v10.13.0 以上
初始化dumi項目之後，記得更新我們原本的package.json的name屬性，避免與框架文件起衝突，這裡只需要主要name即可，依賴還是dumi的依賴這裡的name涉及到後續發布npm包的名稱
注意下dumi的文件結構，可以按照該結構，先建立文件，在這我就不介紹dumi的使用，有興趣的參考文檔
image
這裡需要注意，/src/index.ts必須導出你所需要別人使用的組件，為何在此導出後續講到打包時會提及的,程式碼可以參考如下
image
這裡導出的組件，就是後續別人使用的入口
使用方法：import {Foo} from '組件名稱'
這裡我們只導出簡單的Foo組件，功能就是傳入一個值頁面展示罷了
<Foo value='Hello World'>

配置package.json

這裡涉及到幾個知識點

打包工具

因為組件庫是需要我們打包後上傳，例如dist文件夾，因此需要選擇一種打包工具，dumi框架中默認使用了father的打包工具，因此無需過多關心打包的事情，只需要執行 yarn build 即可

打包類型

打包主流的目前所知，分為 esm cjs umd三種格式
esm：導出方式為 export import
cjs：導出方式為require
umd：整合為對象，通過script標籤進行引入。

package.json 配置項

講完打包的一些內容，就進入了發包的過程，npm發包主要看pck文件的配置，例如入口文件，發包文件夾等等，因此介紹下pck的配置便於更好的理解打包發包流程。貼上簡單的配置圖
image

main:入口文件，這指的是其他人使用時，從這個路徑引入組件
module：es6編譯入口文件
files：包含在項目中的文件(夾)數組，也就是你要發送到遠端的文件夾
typings：TypeScript 的入口文件

打完包，完成pck的配置，我們就可以進入最後一個階段了：發包到遠端

發送npm包至遠端

首先你得有一個npm帳號，如何建立不贅述
先執行 npm login 進行登錄
在執行 npm publish 將你的組件庫發布到官網上。
在此可能會遇到一個錯誤403,這代表這你的npm包名稱已經被佔用了，或者當前的包版本不對。名稱不對該名稱或者使用組織名。包版本不對就升一個版本看看就好

好了，現在你擁有了屬於自己的組件庫，好好維護吧

VirMach 便宜 VPS

QNews

QNews