来和我一起发布自己的第一个npm包吧!

503 阅读3分钟

前言

作为一个合格的前端,你肯定会用过npm上的不少package包,比如著名的 lodash、react、vue、axios等等库,如果你还不知道如何发布自己的npm包,花五分钟时间看完这篇文章,一定会让你有所收获!

步骤

1.准备npm账号

登陆npm官网,注册自己的npm账号,这里会使用到邮箱,注册以及后面发布的时候也需要邮箱来接受对应验证码信息。

官网地址:www.npmjs.com

注册好了之后进入会看到这样的界面。

1651982441.png

2.配置npm接入地址

查看npm配置的接入地址,在发包的时候注意registry 应该指向地址registry.npmjs.org/

设置完后使用命令npm config get检查

image.png

3.初始化npm仓库

npm init

依次输入你的库的信息,比较重要的是name、version属性,name表示发的包名称,因为在npm仓库每个npm包名都唯一的,所以确保包能发布成功则名字要唯一;version表示版本号,在我们更新版本的时候可以修改版本号的值表示不同的版本

4.编写你的脚本库代码

5.发布到npm仓库

5.1 配置发布者信息

需要依次输入你的npm账户名、密码、邮箱、以及你邮箱收到验证码信息。

npm adduser

如果你没有设置你的registry 地址,你就会遇到这样的错误。

image.png

成功登录后,你就会看到

1651984573.png

5.2 正式发布

npm publish

以上就是简单发布一个公共包的基本流程,如果需要发公司等私有包的话,需要修改npm配置的接入地址为公司下载包的地址即可,注意:前面说过了,我们必须保证自己发的包名在npm上没有被别人使用过,否则就会出现下面这样的报错

1651988633(1).png

然后这个时候我们只需要修改一下name的值,保证唯一性就可以啦~🐮

5.3 上npm官网查看

你就能看到自己发布的新鲜的包了,别人也可以去下载使用啦!

image.png

拓展

热更新调试

如果你在项目中使用自己发布的npm的过程中发现了问题,又不方便调试的时候。不要慌张,这时候你可以使用npm link将你的包关联到项目并且实时调试。具体方式如下:

如何进行npm包的热更新调试模式

1.将npm全局包指向当前npm包地址

npm link 在当前npm包中使用

2.在项目中调试当前npm包

npm link <name> 在项目中引入包,name是发布包的名字

3.当npm 包改变的时候,重启项目就可以看到最新效果

4.当调试完后,我们需要注销全局包的使用

npm unlink <name> name是发布包的名字

总结

我们可以将一些自己公司的工具以及能为我们节省时间成本的库的对应代码都放到npm上,如果条件允许,我们可以配置公司私有的npm库。通过npm包的方式可以帮我们快速集成多项目间的公用文件,并且实现版本管理。