持續創作，加速成長！這是我參與「掘金日新計劃 · 10 月更文挑戰」的第3天，點選檢視活動詳情

前言

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

那麼，如何釋出屬於自己的第一個npm包呢?

1.初始化包的基本結構

新建一個資料夾，在這個資料夾中新建三個檔案

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

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檔案

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

``` //定義格式化時間的方法，將格式化時間的方法暴露出去 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檢視自己釋出的包

最後，將自己釋出的包根據說明文件下載下來使用

``` //匯入自己上傳到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上釋出沒有意義的包

釋出自己的第一個npm包

前言