本节主要讲npm包的发布，重点在发布，因此代码内容会简单，关于构建组件发布npm包会在下一章节讲述
系列文章：
npm（五）：组件发布npm包全流程 (使用rollup打包工具)
目录
1. 注册npm账户，注册完成之后邮箱会收到验证邮件，进行验证。
5. 创建 .npmignore 或 .yarnignore
一. npm账户
1. 注册npm账户，注册完成之后邮箱会收到验证邮件，进行验证。
2. 登录npmjs.com
3. 打开命令行，登录 npm
-
在登录之前，先确定一下
NPM镜像，如果镜像在之前设置为了淘宝镜像，那么在使用npm login登录时会出错，所以需要先将源替换为官方源，然后再上传。 -
# 查看当前 npm 源配置 $ npm config ls # 查看当前 npm 全部源配置 $ npm config ls -l # 将 npm 源地址设置为官方源 $ npm config set registry https://registry.npmjs.org/ # 将 npm 源地址设置为淘宝源（用于安装 npm 速度慢的时候使用） $ npm config set registry https://registry.npm.taobao.org/ -
通过执行
$ npm config ls -l命令查看metrics-registry是否为官方源"https://registry.npmjs.org/"，如果不是则使用上面命令设置为官方源。 -
进行登录
# 登录命令 $ npm login # 退出登录命令 $ npm logout -
运行登录命令之后输入
NPM 账号、密码、邮箱HuaJi:my-react-lib HuaJi$ npm login Username: yanhuakang Password: Email: (this IS public) 1060553506@qq.com Logged in as yanhuakang on https://registry.npmjs.org/. -
登录之后出现最下面这行
Logged in as yanhuakang on https://registry.npmjs.org/.就说明登录成功了。
二. 建项目，初始化
1. 创建项目
$ mkdir npm-test && cd npm-test2. 创建 package.json
$ npm init
或
$ npm init -y # 使用默认配置关于 package.json，你可以通过我的这篇文档了解并完善你的package.json，这里就不再赘述npm（二）：剖析 package.json_五虎战画戟-CSDN博客
3. 创建 README.md
$ touch README.md包内要包含详细的 README.md 说明文档
4.创建 HISTORYLOG.md
针对于包的迭代需有CHANGELOG.md 日志记录文档。
$ touch HISTORYLOG.md5. 创建 .npmignore 或 .yarnignore
可以通过配置一个 .npmignore 或者 .yarnignore 文件来排除一些文件, 防止大量的垃圾文件推送到 npm, 规则上和你用的 .gitignore 是一样的。.gitignore 文件也可以充当.npmignore 文件。
如果你使用的是 npm publish，对于使用.npmignore；如果你使用的是 yarn publish，对于使用.yarnignore。
$ touch .npmignore三. 编写包内容、测试、发布
1. 创建包入口文件
入口文件即 package.json main 字段指向的文件路径
{
"main": "index.js",
}$ touch index.js
index.js： 简单的实现一下
function todo () {
console.log('npm-test index.js 测试输出')
}
// 导出
export default todo2. npm link 本地调试
npm link分两步过程
- npm link在包文件夹中将在全局文件夹{prefix}/lib/node_modules/<package>中创建一个符号链接，该符号 链接链接到npm link执行命令的包。（prefix的值请参见npm-config）。它还会将包中的任何 bin 链接到{prefix}/bin/{name}.
- 在其他位置，npm link package-name将创建从全局安装package-name到node_modules/ 当前文件夹的符号链接。
2.1 当前包目录下执行 npm link：
$ npm link
输出结果：
HuaJi:npm-test HuaJi$ npm link
npm WARN npm-test@1.0.0 No description
npm WARN npm-test@1.0.0 No repository field.
up to date in 1.146s
found 0 vulnerabilities
/Users/HuaJi/.npm-global/lib/node_modules/npm-test -> /Users/HuaJi/learning/npm-test2.2 在其他项目中安装我们的本地包：
$ npm link npm-test
输出结果：
HuaJi:my-app HuaJi$ npm link npm-test
/Users/HuaJi/learning/my-app/node_modules/npm-test -> /Users/HuaJi/.npm-global/lib/node_modules/npm-test -> /Users/HuaJi/learning/npm-test2.3 调试
在使用的项目在引入我们的本地npm 包
import { todo } from 'npm-test'
todo() // npm-test index.js 测试输出调试成功！
这个npm测试包最终的目录结构：
└── npm-test
├── index.js
├── test.js
├── README.md
├── HISTORYLOG.md
├── .npmignore
├── .gitignore
└── package.json3. 发布
3.1. 查看包名是否已存在
$ npm view npm-test看到该包名以为占用
HuaJi:npm-test HuaJi$ npm view npm-test
npm-test@0.0.1 | ISC | deps: none | versions: 1
dist
.tarball: https://registry.npmjs.org/npm-test/-/npm-test-0.0.1.tgz
.shasum: bbacd814b5bcb1f5729c4c22676144db617929e0
maintainers:
- andrii.chizh <andrii.chizh@avid.com>
dist-tags:
latest: 0.0.1
published over a year ago by andrii.chizh <andrii.chizh@avid.com>在package.json name修改名称
{
"name": "my-npm-test-lib"
}
重新查看
HuaJi:npm-test HuaJi$ npm view my-npm-test-lib
npm ERR! code E404
npm ERR! 404 'my-npm-test-lib' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! 404
npm ERR! 404 'my-npm-test-lib@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/HuaJi/.npm/_logs/2021-09-24T05_13_43_584Z-debug.log看到404说明这个包还没有，所以我们可以创建了
3.2 发布
$ npm publish
- 如果登录的 NPM 账号没有验证邮箱，运行命令之后会出现下面这个报错 you must verify your email before publishing a new package，所以注册之后记得去邮箱里面验证一下，验证之后可以再次运行npm publish，如果还报这个错误可以重新登录一下 NPM 账号；
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish npm notice npm notice 📦 dzmtest@1.0.0 ...... npm ERR! code E403 // 主要是这行错误 npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/dzmtest - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy. npm ERR! A complete log of this run can be found in: npm ERR! /Users/dengzemiao/.npm/_logs/2020-07-22T03_27_19_859Z-debug.log
-
如果出现下面这个错误 403 a package version that is forbidden by your security policy. ，意思是需要修改
package.json中的version版本号，一般是版本已经存在，新项目发布应该不会报这个错误。dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish npm notice npm notice 📦 dzmtest@1.0.0 ...... npm ERR! code E403 // 主要是这行错误 npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/dzmtest - You cannot publish over the previously published versions: 1.0.0. npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy. npm ERR! A complete log of this run can be found in: npm ERR! /Users/dengzemiao/.npm/_logs/2020-07-23T03_32_29_970Z-debug.log执行命令，升级版本号 npm version_五虎战画戟-CSDN博客
再次执行发布命令
$ npm publish
看到 + my-npm-test-lib@1.0.0 代表发布成功！，去npm搜索一下
有了！如果搜索不到，可以点击你的头像=>packages，这里也能看到你发的包！
四. 使用
在你的业务项目中安装你的包
$ npm i my-npm-test-lib如果你还是在之前的调试项目安装这个包，记得先执行 npm unlink npm-test，卸载之前的本地测试包
$ npm unlink npm-test在你的项目中安装你的npm包
import { todo } from 'my-npm-test-lib'
todo() // npm-test index.js 测试输出成功！
五. 更新
更新包就和version有关了，你可以看这篇文档了解一下 version_五虎战画戟-CSDN博客
六. 废弃与变更，慎重！
请参阅这里 npm unpublish 与 npm-deprecate_五虎战画戟-CSDN博客
你也可以参阅 npm 的取消发布政策了解更多信息
当然你也可以直接从 npmjs.com 直接废弃你的包
下一章节再讲述如何封装组件并发布npm包
欢迎 关注、点赞、评论！━(*｀∀´*)ノ亻!
扫一扫
1754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
