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 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,也包括过程中可能遇到的问题。发布完我们自己的包之后,我们会在下一篇文章中介绍安装自己的包和涉及到的一些引用模块相关的知识,以及后续文章中介绍如何对发布过的包进行升级和废弃等。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值