npm發佈包教程（二）：發佈包

上一篇文章《npm發佈包教程（一）：從npm提及》中咱們介紹了npm相關的一些知識，旨在讓你們對npm有一些深刻的理解，這一篇咱們正式開始演示發佈過程。

1、準備工做

在正式開始演示前，咱們還須要作兩項準備工做：

1.註冊npm帳戶

註冊地址

• 全名：
• 郵箱：
• 用戶名：重要！發佈scoped包時會用到
• 密碼：

2.全局安裝nrm

npm i nrm -g
複製代碼

nrm是npm倉庫管理的軟件，可用於npm倉庫的快速切換

nrm 經常使用命令：

nrm //展現nrm可用命令
 nrm ls //列出已經配置的全部倉庫
 nrm test //測試全部倉庫的響應時間
 nrm add <registry> <url> //新增倉庫
 nrm use <registry> //切換倉庫
複製代碼

2、發佈包

開始演示前作兩個簡短說明： （1）npm官方建議規範的包至少包含：

• package.json（包的基本信息）
• README.md（文檔）
• index.js （入口文件） 後續的演示都遵循此規範。

（2）本次僅演示我的帳戶的包發佈，包括一個unscoped包和一個scoped的包。團體帳戶下的包發佈流程和我的帳戶差異不大，在此不作展開。

1.發佈unscoped包

yuyy-test-pkg

第一步：建立項目

（1）建立工程文件夾

mkdir yuyy-test-pkg && cd yuyy-test-pkg
複製代碼

（2）建立package.json

npm init
複製代碼

按照提示一步步完善便可，也可以使用npm init -y使用npm默認設置，稍後再經過編輯package.json修正。 注意：本次演示的包的入口文件是index.js，請務必確保package.json中字段main對應的值是「index.js」。 最終結果：

{
  "name": "yuyy-test-pkg",
  "version": "1.0.0",
  "description": "my first npm package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm",
    "packge"
  ],
  "author": "yuyy",
  "license": "ISC"
}

複製代碼

（3）建立README.md 內容：

### yuyy-test-pkg

This is my first npm package!

It is just for learning.
複製代碼

（4）建立index.js 內容：

module.exports = {
    printMsg: function () {
        console.log('this message is from yuyy-test-pkg!');
    }
}
複製代碼

最終的目錄結構：

└── yuyy-test-pkg
    ├── README.md
    ├── index.js
    └── package.json
複製代碼

第二步：發佈

npm publish
複製代碼

可能報的錯：

（1）未登陸

npm ERR! code ENEEDAUTH
npm ERR! need auth auth required for publishing
npm ERR! need auth You need to authorize this machine using npm adduser
複製代碼

解決辦法：npm adduser 輸入：

• 用戶名（忘記的話，去npm網站查看:頭像 > Profile Settings）
• 密碼
• 郵箱

（2）倉庫地址不對

npm ERR! code E409
npm ERR! Registry returned 409 for PUT on http://r.cnpmjs.org/-/user/org.couchdb.user:yuyy: conflict
複製代碼

緣由：經過nrm ls 命令查看我此時的倉庫地址爲cnpm，而不是npm

解決辦法：用nrm切換到npm倉庫，執行命令nrm use npm

以上問題解決後再次執行發佈命令npm publish，發佈成功

第三步：去npm 官網搜索

有可能有延遲，不能立馬看不到。

2.發佈scoped包

@yuyy/babel

第一步：建立項目

（1）建立工程文件夾

mkdir babel && cd babel
複製代碼

（2）建立package.json

npm init
複製代碼

按提示操做，最終結果：

{
  "name": "babel",
  "version": "1.0.0",
  "description": "my scoped test package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm",
    "package"
  ],
  "author": "yuyy",
  "license": "ISC"
}
複製代碼

（3）建立README.md 內容：

### @yuyy/babel

This is my scoped npm package!

It is just for learn.
複製代碼

（4）建立index.js 內容：

module.exports = {
    printMsg: function () {
        console.log('this message is from @yuyy/babel!');
    }
}
複製代碼

最終的目錄結構：

└── babel
    ├── README.md
    ├── index.js
    └── package.json
複製代碼

第二步：發佈

npm publish
複製代碼

報錯：沒有發佈權限

npm ERR! publish Failed PUT 401
npm ERR! code E401
npm ERR! This package requires that publishers enable TFA and provide an OTP to publish. For more info, visit: https://go.npm.me/2fa-guide : babel
複製代碼

緣由：已經存在babel包，而我又不是babel的發佈者

解決：包名和域名差很少，先到先得，若是我非要發佈一個叫babel的包，只能給它加做用域放到個人命名空間下

第三步：加做用域

npm init --scope=@yuyy -y
複製代碼

@符號後面的是你註冊npm帳戶時的username，若是不記得能夠經過npm whoami查詢。 上面的命令實際上是在從新生成package.json，只是會給包增長了做用域，執行完後package.json如今的內容：

{
  "name": "@yuyy/babel",
  "version": "1.0.0",
  "description": "my scoped test package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm",
    "package"
  ],
  "author": "yuyy",
  "license": "ISC"
}
複製代碼

惟一的變化是name字段由原來的babel變成了@yuyy/babel。

第四步：再次發佈

npm publish
複製代碼

報錯：

npm ERR! publish Failed PUT 402
npm ERR! code E402
npm ERR! You must sign up for private packages : @yuyy/babel
複製代碼

緣由：

• npm publish 命令執行，默認是進行私有發佈，參見官網publish命令
• 上一篇文章最後提到過scoped的包私有發佈時須要收費

解決：若是不想花錢，那隻能將包面向公共發佈，這也符合npm鼓勵開源的精神，這一點和GitHub建立倉庫相似。

第五步：公共發佈

npm publish --access public
複製代碼

執行結果：

值得注意的一點：咱們的項目名是babel，最終發佈的包名是@yuyy/babel，可見發佈的包名能夠和項目名不一致，包名取決於package.json中的name字段。

第六步：npm官網搜索

至此，咱們完成了npm包發佈的所有過程，一個unscoped包：yuyy-test-pkg，另外一個scoped包：@yuyy/babel，也包括過程當中可能遇到的問題。發佈完咱們本身的包以後，咱們會在下一篇文章 《npm發佈包教程（三）：安裝和加載原理》中介紹安裝本身的包和涉及到的一些引用模塊相關的知識，以及後續文章中介紹如何對發佈過的包進行升級和廢棄等。

相關文章：

1.《npm發佈包教程（一）：從npm提及》

2.《npm發佈包教程（二）：發佈包》

3.《npm發佈包教程（三）：安裝和加載原理》

4.《npm發佈包教程（四）：迭代》

5.《npm發佈包教程（五）：廢棄/刪除》