npm發(fā)包準(zhǔn)備

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

賬號注冊

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

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

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

鏡像準(zhǔn)備

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

npm i -g nrm

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

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

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

npm發(fā)包操作

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

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

發(fā)布npm包

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

npm init

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

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

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

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

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

npm publish

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

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

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

npm publish --access public

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

打開npm官網(wǎng)也可以看到我們的包已經(jīng)成功被發(fā)布了：

更新npm包

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

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

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

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

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

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

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

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

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

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

這些版本更新命令的區(qū)別主要體現(xiàn)在對版本號的影響和更新的穩(wěn)定性上，開發(fā)者根據(jù)改動的性質(zhì)選擇合適的更新類型以確保對其他用戶的影響最小，當(dāng)然個人開發(fā)的話一般使用前三個命令即可：

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

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

使用npm包

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

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

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

刪除npm包

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

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

npm unpublish 包名@版本號

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

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

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

npm deprecate 包名 '撤銷警告'

如下我們通過對我們發(fā)布版本的包進(jìn)行一個廢棄操作：

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

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

npm unpublish 包名 --force

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

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

npm發(fā)包技巧

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

package配置

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

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

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

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

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

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

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

4）其他配置：以下是完善發(fā)包的一些其他配置信息，可以根據(jù)自身需要進(jìn)行設(shè)置：

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

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

當(dāng)我們執(zhí)行了pub-beta命令，意味著我們要發(fā)布的是beta的包，發(fā)布成功之后就會給包打上一個beta的標(biāo)記，意味著該包版本是預(yù)覽版本，如下所示：

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

npm i 包名@beta

默認(rèn)安裝設(shè)置

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

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

如下可以看到我們可以給0.1.1版本打上latest標(biāo)簽：

后面用戶如果沒有安裝過該包的話，不指定版本直接安裝就會安裝0.1.1版本的包，如果已經(jīng)安裝了該包的其他版本，可以先刪除該包然后再安裝依賴即可。

以上就是前端npm發(fā)包的完整流程及避坑指南的詳細(xì)內(nèi)容，更多關(guān)于前端npm發(fā)包流程的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論