大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以 点此扫码加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。
本文是源码共读群小伙伴 @NewName 的投稿。
原文：https://juejin.cn/post/7125709933709885448
他基本是我出一期就写一期笔记。跟下来近40期，学会看源码之后，还自己学各种源码。
聪明的你做了几个项目之后，有没有发现发现某些工具方法或者组件的使用频率很高，好多项目都在用。如何做到这些工具方法或者组件的更优雅地复用而不是用到了就复制粘贴呢？封装为一个npm包是一个不错的选择。本文以图文结合的方式介绍了如何从0到1发布一个npm包，文中的一些关键点的说明将帮你避坑提效。欢迎阅读学习~
Part11.代码准备
每个人要发布的npm包类型都不尽相同，有UI组件库，有工具函数库，还有使用的插件等。笔者要发布的npm包是在项目中常用的工具函数组成的工具函数库，构建工具使用的是rollup，代码托管在github上。下面简述一下一些关键点：
首先在github上新建仓库，新建仓库时License 选择MIT, 此步骤不选择也无妨，后续添加license也可以。但是一定要有License才能发布npm包。
拉取代码到本地
初始化项目，安装依赖等
完善功能
打包，并在package.json中指明入口
另外如果发布公有包需要在package.json中增加publishConfig的配置
"publishConfig": {
"access": "public"
},更多关于项目的搭建以及一些配置方面的内容建议阅读文末的参考资料。
Part22.账号注册
先看下图了解注册的流程：
网址：https://www.npmjs.com/signup输入网址后会进行安全性检查，之后界面如下：
点击"我是人类" 会进行图片验证，如下图：
图片验证完就是输入用户名、密码、邮箱过程， 最后让输入one-time-password，这个一次性密码（相当于验证码）会发到你预留的邮箱里面。填写之后应该会注册成功的。
Part33.npm包发布
13.1 登录npm账号
3.1.1 登录失败
执行npm login 命令登录npm ：
如上图所示，登录失败了。解决办法：使用nrm切换镜像，将镜像改为npm。下面简要介绍一下nrm。
3.1.2 nrm 介绍
nrm 用于管理镜像，是一个可以切换npm镜像的管理工具。如下是安装和查看是否安装成功的命令：
npm i -g nrm
nrm -V
常用nrm命令如下：
想了解更多关于nrm的内容请查看文档和资料。下图是使用nrm ls命令查看镜像：
下图是将镜像切换为npm
3.1.3 成功登录
切换镜像之后再登录：
如上图登录时需要输入OTP，要查看邮箱。输入OTP回车之后就可以成功登录了
23.2 如何发布npm包
3.2.1 首次发布成功
登录成功之后即可执行发布命令：npm publish，如下图：
此时npm包发布成功了。
3.2.2 名字相似发布失败
但是感觉名字'mxdevutil'可读性不咋好啊，所以改了一下名字，新名字为'mx-dev-util'重新发布，但却报错，如下图所示：
上图报错信息告诉我们：新包的名字和已有的包名字很相似，所以没有发布成功。解决的方法之一是可以起区分度较大的名字，但删掉重新发布更好。
33.3 如何删除npm 包
3.3.1 废弃npm 包
查资料所如下命令可以删掉发布错误的npm包：
但实际上此命令是表示废弃已发布的npm包，并不是删除。在npm网站上仍然能够查到已废弃的npm包，如下图所示：
废弃之后是否可以发布成功呢？重新执行npm publish
执行结果如下图：
还是报错，所以单单废弃原有包还是不能发布新包的。
3.3.2 删除npm包
正确的解决办法是：npm unpublish <报名> -force ,命令执行效果：
再在npm网站上查找则查不到了：
删掉已发布的包之后，终于可以重新发布了：
发布成功！在npm网站上也能够看到新包了：
43.4 如何使用npm包
首先安装我们发布的npm包，执行命令 npm i mx-dev-util, 如下图：
可以查看package.json文件，发现已经将mx-dev-util加添为dependiences:
接着就是在项目中使用npm包提供的方法了：
53.5 更新npm包版本
更新npm包两步走：
第一步：执行npm version <版本号类型>
第二步：执行 npm publish
3.5.1 npm version介绍
npm version命令使用方式如下：
npm version major | minor | patch | premajor | preminor | prepatch | prerelease这里简单介绍一下major | minor | patch 的区别：在package.json中有一个version字段，结构为 "x.y.z" ，也就是三位的版本号。分别对应 version里面的major、minor，patch。如果当前版本为 0.0.1 则发布major、minor，patch版本之后会变为 1.0.0 ，0.1.0， 0.0.2。导图总结如下：
了解更多可查看npm version文档和相关资料。了解了npm version命令之后，执行npm version major :
执行命令失败，提示需要先提交代码，下图为提交代码过程：
提交代码后，再执行版本更新命令：
3.5.2 改版后发布
提示版本已经更新为2.0.0版本，然后执行 npm publish 命令：
可以看到版本更新成功。下面总结一下用到发布npm包用到的npm命令
Part44.总结
（1）本文介绍发布一个npm包的三个关键环节：
发布内容。也就是代码，这是npm包的基础
注册npm账号。这是能够成功执行npm 发布命令的前提
npm包发布。掌握npm 包发布的这些命令是关键
（2）本文介绍了如何使用 nrm 切换 npm 的镜像 希望看完本文对您有帮助，表达不清楚或者写错的地方欢迎不吝指正~
参考资料：[1] npm包发布详细教程
[2] 如何发布自己的npm包（超详细步骤，博主都在用）
[3] 如何发布一个npm包
················· 若川简介 ·················
你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇，在知乎、掘金收获超百万阅读。
从2014年起，每年都会写一篇年度总结，已经坚持写了8年，点击查看年度总结。
同时，最近组织了源码共读活动，帮助4000+前端人学会看源码。公众号愿景：帮助5年内前端人走向前列。
扫码加我微信 lxchuan12、拉你进源码共读群
今日话题
目前建有江西|湖南|湖北 籍 前端群，想进群的可以加我微信 lxchuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~
6876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
