37

上一篇文章《npm发布包教程(一):从npm说起》中我们介绍了npm相关的一些知识,旨在让大家对npm有一些深入的理解,这一篇我们正式开始演示发布过程。

一、准备工作

在正式开始演示前,我们还需要做两项准备工作:

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> //切换仓库

二、发布包

开始演示前做两个简短说明:
(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/or...:yuyy: conflict

原因:通过nrm ls 命令查看我此时的仓库地址为cnpm,而不是npm

clipboard.png

解决办法:用nrm切换到npm仓库,执行命令nrm use npm

以上问题解决后再次执行发布命令npm publish,发布成功

.clipboard.png

第三步:去npm 官网搜索

有可能有延迟,不能立马看不到。

clipboard.png

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鼓励开源的精神,这一点和GitHub创建仓库类似。

第五步:公共发布
npm publish --access public

执行结果:

clipboard.png

值得注意的一点:我们的项目名是babel,最终发布的包名是@yuyy/babel,可见发布的包名可以和项目名不一致,包名取决于package.json中的name字段。

第六步:npm官网搜索

clipboard.png

至此,我们完成了npm包发布的全部过程,一个unscoped包:yuyy-test-pkg,另一个scoped包:@yuyy/babel,也包括过程中可能遇到的问题。发布完我们自己的包之后,我们会在下一篇文章《npm发布包教程(三):安装发布包》中介绍安装自己的包和涉及到的一些引用模块相关的知识,以及后续文章中介绍如何对发布过的包进行升级和废弃等。

相关文章:
1.《npm发布包教程(一):从npm说起》
2.《npm发布包教程(二):发布包》
3.《npm发布包教程(三):安装发布包》
4.《npm发布包教程(四):迭代》
5.《npm发布包教程(五):废弃/删除》


yuyongyu
921 声望41 粉丝

一个前端