無論是使用第三方庫還是創建和分享自己的工具，npm都為我們提供了一個強大而便捷的平臺，然而很多開發者在將自己的代碼發布到npm上時往往面臨各種困惑和挑戰，本篇文章將從準備工作到發布上線，探討如何讓npm包更易發布及避免常見的坑，確保你開發流程更加順暢

目錄

npm發包準備

賬號注冊

鏡像準備

npm發包操作

發布npm包

更新npm包

使用npm包

刪除npm包

npm發包技巧

package配置

默認安裝設置

npm發包準備

發布一個npm包看似簡單實際上卻需要做好充分的準備工作。包的結構、版本管理、依賴關系以及測試等都需要經過細致的規劃和操作才能確保發布后的包穩定且易于維護，接下來將探討在發布npm包之前開發者需要做哪些必要的準備工作，讓包能夠順利發布并為其他開發者帶來價值：

賬號注冊

在發布npm包之前我們要先確保直接已經注冊過npm賬號了，如果沒有我們就需要先注冊一個，因為npm的發包流程需要依賴這個賬號，這里我們訪問 官網?然后點擊Sign Up 注冊賬號即可，如下圖所示：

這里注意一下，注冊npm的用戶名一旦生效便不能再做更改，所以這里你要好好想一想：

注冊成功之后，就會發一份郵件到你注冊的郵箱賬號上，注入驗證碼就可以登陸到我們npm的平臺上了，如下所示：

鏡像準備

要發布npm包的話對應的鏡像一定是要切換到npm官方鏡像，國內安裝依賴一般都會切換其他鏡像源，這里發包的話還是要切換到官方鏡像，所以這里我們終端全局安裝鏡像源切換工具nrm，如下所示：

npm i -g nrm

nrm工具常用的鏡像操作命令如下所示：

nrm -V // 查看當前nrm版本
nrm -h // 顯示所有命令
nrm current // 顯示當前鏡像名稱
nrm use <name> // 切換鏡像
nrm add <name> <url> // 新增鏡像
nrm del <name> // 刪除鏡像
nrm ls // 查看鏡像列表
nrm test <name> // 測試鏡像

通過如下指令我們就可以成功切換到npm官方鏡像了：

npm發包操作

盡管npm提供了一個簡單直觀的發布方式，但要確保包的發布過程順利進行并能為他人所用，還是需要掌握一些基本的發包技巧，當然博主也不能面面俱到講解所有內容，具體命令參考：官網?這里不再過多贅述，如下所示：

接下來我們將一步步了解npm包發布的具體操作流程，從創建包到發布、更新版本、以及如何處理常見問題，讓包在npm上順利亮相，如下所示

發布npm包

項目初始化：接下來我們初始化一個項目并實現一段簡單的代碼來進行發包操作，首先終端執行如下命令初始化項目配置生成一個package.json文件，如下所示：

npm init

然后我們再新建一個入口文件index.js，實現兩個簡單的函數并暴露出去：

const addFn = (a, b) => a + b;
const subtractFn = (a, b) => a - b;export { addFn, subtractFn }

npm登錄：接下來開始對我們的項目進行發包操作，首先我們先打開項目終端，執行如下發包流程進行發布操作，當我們終端現在執行npm login登錄的時候，現在已經不需要在終端輸入賬戶郵箱密碼以及還有驗證碼內容了，我們登錄npm官網的時候這里設置一個2FA雙重驗證操作，這里我們直接設置身份驗證器選項的二次校驗，如下所示：

當我們終端執行npm login登錄的時候，直接回車就會彈出身份驗證器界面，安裝一個瀏覽器身份驗證插件然后掃描QR碼配置一下即可，后面直接輸入驗證碼即可，無需輸入賬戶密碼等操作：

npm發包：發包前請確保package.json中name值沒有和已有的包重復(npm官網查詢)，如果包名重復，可以修改name或者使用npm作用域(Scoped Packages)，格式如：@yourusername/package-name，如果一切準備就緒，那么就開始執行如下命令發包：

npm publish

如下代碼可以看到我們發包的一些相關信息，這里我們還需要進行身份驗證(npm發包開始變得嚴格起來了)，回車然后還是輸入瀏覽器生成的驗證碼即可：

如下提示我們發包失敗了，主要原因還是因為我們定義的包名與npm平臺已經存在的包及其相似，所以這里我們還是采用作用域命名的方式進行發包：

這里需要注意一下，?嘗試發布一個帶有作用域(比如@ztk63lrd/npm-test)的包，而這個包需要一個付費計劃才能作為私有包發布，使用了帶作用域的包名它默認會被當作私有包處理，除非你顯式指定為公開包，通過如下指令將包設置為公開包就不需要付費計劃：

npm publish --access public

如下我們可以看到我們的包發布完成，并且也顯示了包的一些相關信息：

打開npm官網也可以看到我們的包已經成功被發布了：

更新npm包

更新npm包分為兩步：第一步執行 npm version <版本號類型>，第二步執行npm publish，其更新包的常用命令如下所示：

// 第一步更新包：
npm version  major | minor | patch | premajor | preminor | prepatch | prerelease// 第二步發布包：
npm publish

npm的版本更新遵循語義化版本控制（Semantic Versioning，SemVer）即版本號由三部分組成：major.minor.patch，此外npm提供了更多的更新命令，如premajor、preminor等，下面簡要說明這些更新命令的區別：

1）major：增加主版本號，表示不兼容的API更改，例如1.0.0升級到2.0.0通常意味著代碼存在破壞性的變化，舊版本的代碼可能無法正常工作。

2）minor：增加次版本號，表示向下兼容的功能新增，例如1.0.0升級到1.1.0通常表示添加了新特性或功能，但不會破壞現有功能的兼容性。

3）patch：增加修補版本號，表示向下兼容的問題修復，例如1.0.0升級到1.0.1通常是修復bug或改進性能，但不會影響功能或 API。

4）premajor：在major更新之前發布預發布版本，例如1.0.0升級到2.0.0-beta.0適用于發布破壞性改動的預覽版本。

5）preminor：在minor更新之前發布預發布版本，例如1.0.0升級到1.1.0-beta.0適用于發布新功能的預覽版本。

6）prepatch：在patch更新之前發布預發布版本，例如1.0.0升級到1.0.1-beta.0適用于發布修復的預覽版本。

7）prerelease：發布預發布版本(通常是 alpha、beta 或 rc 版本)，這些版本通常包含未完全穩定的功能作為正式版本發布前的過渡，例如1.0.0升級到1.0.1-rc.0。

這些版本更新命令的區別主要體現在對版本號的影響和更新的穩定性上，開發者根據改動的性質選擇合適的更新類型以確保對其他用戶的影響最小，當然個人開發的話一般使用前三個命令即可：

接下來我們想生一次大版本，所以直接終端執行如下命令即可，這里我們不建議用戶跳過命令直接修改package.json文件中的version字段，雖然也能修改版本但是避免用戶可能會記錯版本號從而導致版本錯亂的情況：

改版之后直接點擊發包，來到npm平臺可以看到我們的包的版本也是重新被修改了：

使用npm包

這里我們直接終端安裝我們發布的包即可，如下直接復制命令安裝：

可以看到我們的包已經成功的被安裝到node模塊里面，并且也添加到了項目依賴上，版本號也是我們剛剛更新過的2版本：

接下來我們就需要直接在項目中使用包提供的方法即可，如下所示可以看到我們導入我們的包運行成功了，這里需要注意一下如果我們想設置ES的導入當時的話，需要在package包配置導入類型：

刪除npm包

如果你發布了錯誤的包或者誤發布的話，我們可以通過如下的命令來進行挽回操作，這里需要注意以下，如果報權限方面的錯，加上--force即可。

1）刪除某個版本：比如說我們發現我們發布版本的包有問題想刪除并重新發布，這里我們可以執行如下命令操作即可：

npm unpublish 包名@版本號

刪除完2版本之后，來到npm平臺可以看到我們的包又回到了1版本：

這里需要注意一下，npm不允許使用已經被分配過的版本號(即使撤回或刪除以前的版本號也被視作已分配)，如果要刪除并且重新發布，需要重新發一個新版本，如刪除2.0.0，發布2.0.1即可：

2）廢棄某個版本： 通過如下命令可以在社區里不會撤銷自己已有的包，但會在任何人嘗試安裝這個包的時候得到警告 例如：這個包已經不再維護：

npm deprecate 包名 '撤銷警告'

如下我們通過對我們發布版本的包進行一個廢棄操作：

在npm平臺可以看到我們的包已經被成功廢棄了，并且廢棄的警告也是在平臺顯示了出來：

3）刪除整個包：通過如下命令可以刪除整個npm市場的包，不管該包有多少版本，直接一次性全部刪除，這個命令需要慎用，當然可以在72小時內使用以下命令刪除，但npm不允許刪除已發布超過72小時的包，所以我們要慎重發布和刪除，終端執行如下命令刪除包：

npm unpublish 包名 --force

通過如下命令，我們就可以刪除該包在npm市場上的所有版本：

來到npm平臺，可以看到我們的包已經被成功刪除了：

npm發包技巧

除了基本的包安裝和管理，npm的更多高級功能往往被許多開發者忽視，了解并掌握這些進階技巧能提升開發效率，接下來將深入探討一些進階的npm發包技巧，幫助在發布包時更加高效便捷并解決一些常見的發布問題，如下所示：

package配置

在前端項目中package.json文件是項目的配置文件，包含了項目的基本信息、依賴項、腳本命令等，為了方便后期的npm發包處理，了解package.json中的所有配置項非常重要，以下是各個配置項的詳細說明：

1）基本信息：package.json中配置了以下基本信息字段，這也是發包常用的字段信息：

name: 項目的名稱，npm包的唯一標識符。要求符合npm包命名規范（小寫字母、破折號分隔，不能包含空格）。
version: 項目的版本號，遵循語義化版本控制，如 1.0.0。
description: 項目的簡短描述，便于其他人了解該項目的功能。
main: 指定模塊的入口文件，通常是 index.js，如果是庫文件，npm安裝時會默認加載此文件。
keywords: 一個字符串數組，用于描述包的關鍵詞，便于搜索。
author: 項目的作者信息，可以是個人或組織的名稱。
license: 項目的許可證類型，常見的如 MIT、ISC 等。

2）依賴配置：package.json中配置了以下依賴信息字段，里面分別是本地和生產的包信息：

// dependencies: 項目運行時所需要的依賴包。
// 這些依賴在生產環境中安裝，例如：
"dependencies": {"react": "^17.0.0","axios": "^0.21.0"
}// devDependencies: 項目開發過程中所需的依賴包。
// 這些依賴僅在開發環境中安裝，用于構建、測試等。例如：
"devDependencies": {"webpack": "^5.0.0","babel-loader": "^8.0.0"
}// peerDependencies: 該配置項聲明當前包與其他包兼容的版本。
// 通常用于插件或庫，確保與主應用兼容。例如：
"peerDependencies": {"react": "^16.8.0"
}// optionalDependencies: 可選的依賴包，安裝時不會因為這些包安裝失敗而中斷安裝過程。適用于那些非關鍵依賴。

3）發布配置：publishConfig用于配置npm發布包時的行為，可以設置發布的tag、registry、access等：

"publishConfig": {"registry": "https://registry.npmjs.org/","access": "public"
}

4）其他配置：以下是完善發包的一些其他配置信息，可以根據自身需要進行設置：

// repository: 項目的代碼倉庫信息，通常用于 GitHub 或 GitLab。例如：
"repository": {"type": "git","url": "git+https://github.com/username/project.git"
}// bugs: 提交 bug 的網址，通常是一個指向 issues 頁面的鏈接：
"bugs": {"url": "https://github.com/username/project/issues"
}// homepage: 項目的主頁鏈接，通常指向項目的文檔或網站。// engines: 定義項目支持的 Node.js 或 npm 的版本范圍。例如：
"engines": {"node": ">=14.0.0","npm": "^6.0.0"
}// private: 如果設置為 true，表示該項目是私有的，發布到 npm 時會被拒絕。用于防止將不打算公開的包發布到 npm。
"private": true// config: 用于設置一些自定義的配置信息，供腳本中使用。例如：
"config": {"port": "8080"
}// directories: 用于配置一些特殊目錄路徑，如 lib、bin 等。例如：
"directories": {"lib": "src"
}// bin: 定義可執行文件的路徑。例如：
"bin": {"my-cli": "./bin/cli.js"
}// files: 定義發布到 npm 時要包含的文件或目錄。如果你不想將整個項目發布，可以通過 files 配置選擇性地發布部分內容。
"files": ["dist","lib","README.md"
]

當然為了方便不用每次發包的時候都需要輸入一遍命令，我們可以將命令設置在scripts中：

當我們執行了pub-beta命令，意味著我們要發布的是beta的包，發布成功之后就會給包打上一個beta的標記，意味著該包版本是預覽版本，如下所示：

如果我們想安裝預覽版本的包的時候，需要在包名后添加一個@beta內容，如下所示：

npm i 包名@beta

默認安裝設置

當我們發包之后，有多個版本的情況下，默認情況下用戶安裝的就是最新版本的包，如果想用戶在不指定包版本的情況下載，默認安裝我們設置好的版本包(不一定是最新版本的)，可以通過如下命令進行設置，這樣做就是為了方便預覽版本進行時間驗證：

npm dist-tag add 指定包<版本> latest

如下可以看到我們可以給0.1.1版本打上latest標簽：

后面用戶如果沒有安裝過該包的話，不指定版本直接安裝就會安裝0.1.1版本的包，如果已經安裝了該包的其他版本，可以先刪除該包然后再安裝依賴即可，ok，目前基礎的講解就暫時這些吧，后面博主將繼續深入講解一下關于npm發包的一些實用技巧！