發佈自己的第一個npm包

語言: CN / TW / HK

持續創作,加速成長!這是我參與「掘金日新計劃 · 10 月更文挑戰」的第3天,點擊查看活動詳情

前言

前端模塊化作為前端必備的一個技能,已經在前端開發中不可或缺;而模塊化帶來項目的規模不斷變大,項目的依賴越來越多;隨着項目的增多,如果每個模塊都通過手動拷貝的方式無異於飲鴆止渴,我們可以把功能相似的模塊或組件抽取到一個npm包中;然後上傳到私有npm服務器,不斷迭代npm包來更新管理所有項目的依賴

那麼,如何發佈屬於自己的第一個npm包呢?

1.初始化包的基本結構

新建一個文件夾,在這個文件夾中新建三個文件

新建package.json文件,index.js文件和README.md文件,其中,package.json是包的管理配置文件,index.js文件是包的入口文件,README.md是包的説明文檔

image.png

2.初始化package.json

初始化一個json的配置對象,對象裏會包含6個屬性

{ "name":"zgw-tools",//這是配置對象裏最重要的一個屬性,代表這個包的名稱,在npm服務器上包的名字不能重複,所以上傳前先去官網上搜索一下包名有沒有被佔用了 "version": "1.0.0",//version表示包的版本號,一般默認從1.0.0開始 "main": "index.js",//指定包的入口文件,就是新創建的index.js文件 "description": "提供了格式化時間的功能",//包的描述信息, "keywords": ['dateFormat','formarTime','aaaaa'],//搜索的關鍵字,數組裏的每一個屬性都是一個字符串,自定義關鍵字 "license": "ISC"//包遵循的開源協議,npm默認遵循ISC協議 }

3.定義格式化時間的方法

在文件夾中新建一個src文件夾,裏面創建一個dateFormat.js文件

image.png

在裏面定義一個格式化時間的方法

``` //定義格式化時間的方法,將格式化時間的方法暴露出去 function dateFormat(dataStr){ const dt=new Date(dataStr)

const y=dt.getFullYear() const m=(dt.getMonth()+1+'').padStart(2,'0') const d=(dt.getDate()+'').padStart(2,'0')

const hh=(dt.getHours()+'').padStart(2,'0') const mm=(dt.getMinutes()+'').padStart(2,'0 const ss=(dt.getSeconds()+'').padStart(2,'0')

return ${y}-${m}-${d} ${hh}:${mm}:${ss} }

module.exports={ dateFormat } ```

在index.js文件裏導入模塊,再把對應的方法共享出去

const date=require('./src/dateFormat') module.exports={ ...date }

4.README.md文件編寫包的説明文檔

```

安裝

npm install zgw-tools

導入

const ztest=require('zgw-tools')

格式化時間

//調用dateFormat 對時間進行格式化 const dtstr=dt.dateFormat(new Date()) // 結果 2022-08-01 16:16:00 console.log(dtstr)

開源協議

ISC ```

5.發佈包

發佈之前首先訪問https://www.npmjs.com/官網首頁註冊一個賬號,註冊完成之後終端運行npm login命令,依次輸入賬號,密碼,登陸郵箱即可登錄成功,

注意:若配置了其他的下載源,運行npm login命令之前將下載源換回官方源,否則會導致發佈失敗,nrm ls查看當前下載源

運行npm publish命令,即可將包發佈到npm上

發佈完成之後可以點擊頭像,點擊Packages查看自己發佈的包

image.png

image.png

最後,將自己發佈的包根據説明文檔下載下來使用

``` //導入自己上傳到npm的包 const z=require('zgw-tools')

// 調用方法,傳入當前時間的時間戳 const dt=z.dateFormat(1664717540000) // 打印結果2022-10-02 21:32:20 console.log(dt) ```

那麼如何刪除自己發佈的包呢?

運行 npm unpublish 包名 --force命令即可刪除發佈的包,但是npm unpublish只能刪除72小時內發佈的包,刪除後的包24小時內不允許重複發佈,所以儘量不要往npm上發佈沒有意義的包