乐趣区

npm发布包教程(二):发布包

上一篇文章《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
按照提示一步步完善即可,注意:本次演示的包的入口文件是 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 ENEEDAUTHnpm ERR! need auth auth required for publishingnpm ERR! need auth You need to authorize this machine using npm adduser
解决办法:npm adduser 输入:

用户名(忘记的话,去 npm 网站查看: 头像 > Profile Settings)
密码
邮箱

(2)仓库地址不对 npm ERR! code E409npm ERR! Registry returned 409 for PUT on http://r.cnpmjs.org/-/user/or…: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 401npm ERR! code E401npm 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 402npm ERR! code E402npm 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,也包括过程中可能遇到的问题。发布完我们自己的包之后,我们会在下一篇文章中介绍安装自己的包和涉及到的一些引用模块相关的知识,以及后续文章中介绍如何对发布过的包进行升级和废弃等。

退出移动版