最近使用 Npm 發(fā)布包時(shí)遇到了一些坑，集中記錄下以便后續(xù)查看。

01.

就個(gè)人經(jīng)驗(yàn)來說，我們寫的包往哪兒發(fā)布，無非下面三個(gè)地方。其中淘寶鏡像倉庫每隔十分鐘會同步一下 Npm 倉庫的新模塊，所以實(shí)際要看的也就是往 Npm 倉庫和公司內(nèi)部搭建的私有 Npm 倉庫上如何發(fā)布包。搞不清楚他們的關(guān)系就會碰到一些欲罷不能的大坑。

• Npm 倉庫

  Npm 倉庫是一個(gè)公共平臺，所有人開發(fā)的模塊想要共享都可以扔上去，有人需要使用什么功能去上面找即可。缺點(diǎn)是服務(wù)器架設(shè)在國外，國內(nèi)下載包時(shí)速度比較慢。

• 淘寶鏡像倉庫

  淘寶鏡像倉庫由阿里云贊助，在國內(nèi)搭設(shè)的一套服務(wù)器，每隔十分鐘從 Npm 倉庫上同步一下包，內(nèi)容可以認(rèn)為和 Npm 倉庫是一樣的，所以國內(nèi)一般都會把下載倉庫地址設(shè)置為淘寶鏡像倉庫，這樣子下載包時(shí)會大大加快速度。

• 公司內(nèi)部私有 npm 倉庫

  有的公司內(nèi)部開發(fā)一些私有包不想上傳到公共平臺 Npm 倉庫，于是乎就搭建公司內(nèi)部的私有 Npm 倉庫，與 Npm 倉庫其實(shí)差不多，只不過有一個(gè)是供全世界開發(fā)者使用的平臺，一個(gè)是只供公司內(nèi)部使用的平臺。

02.

介紹下 npm 發(fā)布包的機(jī)制。以 Npm 倉庫為例說明。

• 告訴 npm 你想往哪個(gè)倉庫發(fā)布包。

  往哪個(gè)倉庫發(fā)布包也叫做設(shè)置上傳/發(fā)布地址。這個(gè)過程記錄在 package.json 文件中。publishConfig 屬性就記錄著倉庫地址。我這里是 公司內(nèi)部搭建的私有 npm 倉庫，所以寫了一個(gè)內(nèi)部地址。如果是往 Npm 倉庫 發(fā)布包，該屬性可以省略不寫。

  // package.json
  "publishConfig": {
      "registry": "http://localhost/repository/npm-hosted/"
   }
  

• 申請進(jìn)入倉庫的權(quán)限。

  你要往指定倉庫發(fā)布包，比如往 Npm 倉庫 發(fā)布包，你得先登錄上這個(gè)倉庫，然后才能進(jìn)行上傳。這是因?yàn)?Npm 倉庫得知道是誰進(jìn)行了發(fā)布包這個(gè)動作，并且還要判斷該用戶是否有權(quán)限進(jìn)行發(fā)布包。這就好比你往一個(gè)倉庫運(yùn)輸貨物，得在大門口登記一下，標(biāo)明身份不是。如果你的賬戶名或密碼錯(cuò)誤，倉庫管理員肯定要攔住你，因?yàn)槟悴痪邆錂?quán)限進(jìn)行運(yùn)輸貨物。

  那么怎么獲得進(jìn)入倉庫的賬戶號呢。以 Npm 倉庫為例，登錄 Npm 官網(wǎng)，在右上角有個(gè) Sign up 按鈕，點(diǎn)擊進(jìn)行注冊。記錄下有用信息：賬戶名、密碼、郵箱。如果是公司內(nèi)部搭建的私有 Npm 倉庫，讓管理員給你一個(gè)賬戶密碼即可。

• 進(jìn)入倉庫。

  就像往倉庫運(yùn)輸貨物一樣，有了進(jìn)入倉庫的權(quán)限，那就先登錄進(jìn)入倉庫，然后在進(jìn)行貨物上架。

  $ npm login
  
  Username: xxxx
  Password:
  Email: (this IS public) xxxxx@qq.com
  Logged in as xxxx on https://registry.npmjs.org/.
  

  為了安全起見，輸入密碼不會顯示任何東西，你只需輸入完成按回車即可，不用擔(dān)心自己是否沒有輸入上。

  像上述代碼所示就是登錄成功的標(biāo)志，并且最后一行可以看到我們是要往 https://registry.npmjs.org/ （Npm 倉庫）上發(fā)布包的。

  小tip:

  每次登錄都要手動輸入 賬戶、密碼、郵箱 這個(gè)步驟很是繁瑣，有個(gè)簡單的方法可以一步到位。以 賬戶: admin，密碼:admin123 為例進(jìn)行說明。

  打開百度，搜索 base64 關(guān)鍵字，隨便點(diǎn)開一個(gè) base64 在線編碼/解碼 條目，在新窗口左側(cè)/上測輸入 admin:admin123 （也即：賬戶:密碼 格式，中間有個(gè)英文格式的冒號），點(diǎn)擊編碼按鈕進(jìn)行編碼得到編碼后的值 YWRtaW46YWRtaW4xMjM=。打開 npm 配置文件 .npmrc 文件，默認(rèn)路徑為：C:\Users\Administrator\.npmrc，修改內(nèi)部內(nèi)容如下。此后再進(jìn)行 $ npm login 時(shí)會自動記住賬戶密碼，一路回車登錄即可。

  _auth="YWRtaW46YWRtaW4xMjM="
  email=xxxx@qq.com
  

• 發(fā)布包。

  前面一個(gè)步驟成功進(jìn)入倉庫，接下來就進(jìn)行貨物上架即發(fā)布包。

  切換到要發(fā)布那個(gè)包的根目錄下，輸入以下指令等待即可。

  $ npm publish 
  

  這個(gè)過程可能是遇到問題最多的地方。如果失敗了，檢查 C:\Users\Administrator\.npmrc 文件。一般的使用 Npm 都會配置淘寶鏡像倉庫，這樣我們在下載 npm 包時(shí)會大大提升速度。操作如下：

  $ npm config set registry https://registry.npm.taobao.org
  

  此時(shí)打開 .npmrc 文件會看到變化如下：

  _auth="YWRtaW46YWRtaW4xMjM="
  email=xxxx@qq.com
  registry=https://registry.npm.taobao.org
  

  由于我們這里是往 Npm 倉庫 發(fā)布包的，這里設(shè)置的下載地址是 淘寶鏡像倉庫，二者不一致會導(dǎo)致錯(cuò)誤。可先將最后一行代碼刪除掉，此時(shí)默認(rèn)下載倉庫也是 Npm 倉庫。下載倉庫地址和上傳倉庫地址（前面提到的在 package.json 文件中設(shè)置的）保持一致才能發(fā)布包。發(fā)布完成后可以再設(shè)置下載倉庫為淘寶鏡像倉庫。

  往公司內(nèi)部私有 Npm 倉庫發(fā)布包也要注意這個(gè)問題，要保證下載倉庫和上傳倉庫都是 公司內(nèi)部的 Npm 倉庫。當(dāng)然，大多數(shù)私有倉庫都會設(shè)置代理地址，二者并不是一模一樣，但是要知道都是內(nèi)部 Npm 倉庫即可。

• 更新包。

  更新包和發(fā)布包操作步驟類似，唯一的區(qū)別是要修改下 package.json 中的 version 字段，你更新包，總得讓包的版本變化一下吧。操作重復(fù)上面幾步步驟。

03.

總結(jié)：

• 下載地址。

  從哪個(gè)倉庫下載 npm 包，國內(nèi)一般選擇淘寶鏡像，為嘛？因?yàn)榭煅健ＴO(shè)置完成后可以在 npm 配置文件 C:\Users\Administrator\.npmrc 中進(jìn)行查看。如果是從 Npm 倉庫 下載，將 .npmrc 文件中 registry 那一行代碼刪掉即可。

  設(shè)置方式：

  $ npm config set registry https://registry.npm.taobao.org
  

• 上傳地址。

  自己開發(fā)一個(gè) Node 模塊，想往倉庫發(fā)布共享出去，上傳到哪個(gè)倉庫。如果是往 Npm 倉庫 上傳，該屬性可以不寫，默認(rèn)上傳地址即為 Npm 倉庫。

  設(shè)置方式：

  // package.json
  "publishConfig": {
      "registry": "http://localhost/repository/npm-hosted/"
   }
  

• 發(fā)布和更新包要保證上傳地址和下載地址是同一個(gè)倉庫的地址。