前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【工具】发布NPM包

【工具】发布NPM包

作者头像
神仙朱
发布2020-07-10 15:30:50
9260
发布2020-07-10 15:30:50
举报
后面会把前端进阶的课程内容都总结一遍。

有些都是很常见的知识,但是为了梳理自己的知识树,所以尽量模糊的地方都会记录

笔记列表在公众号右下角

一般发布npm包是肯定是要会的,公司的工具库或者个人的工具库都是要用到的。

但是你一时会了不代表以后也会,比如我还是会忘记,每次还是要查,实在是不胜其烦

今天我就一步步简单搞起来,下面简单来列一下步骤

1、生成你的工具库项目

2、注册一个 NPM 账户

3、发布

4、管理NPM 包的其他的操作

另外:后面会再总结一个系列,就是腾讯项目用到的技术点,有好多好多,可以供大家学习参考,让我们一起进步

生成你的工具库项目

文件目录

假设我现在有一个工具库,如下

看到上面的目录,这就是一般我们的项目都有的打包目录 dist 和 开发目录 src,一般我们只会把 打包后的文件 发布到 npm,也就是 把 dist 发布到 npm

文件内容

现在打包后 dist 中只有一个文件

里面只有一个函数,需要导出这个函数,写个有用的吧,如下

代码语言:javascript
复制
*/

确定发布的文件

虽然我们一般共识是发布 dist 目录,但是我们仍然要去设置

就在 package.json 中,有一个 file 字段,是一个数组,我们在其中添加 dist 文件夹 就可以了

确定入口文件

当我们发布包之后,别人加载我们的包,肯定是要加载某个文件的

这个文件就是入口文件,我们也需要设置

就在 package.json 的 main 字段中

没错,我们的入口就是 dist 文件就中的 index.js

简单介绍下package.json

package.json 中字段非常地多,我们简单记录几个,如下这些

name

你的 npm 包名称,随意命名,但是不能有大写字母,空格,下划线,并且不会和已有包冲突

version

就是你npm 包的版本号,每当我们发布一个新包,都是要修改版本号的看到有三个数字,表示的意思是【主版本·次要版本·补丁版本】

主版本

只有在重大改变,或者达到里程碑时才改变主版本号。像 Vue 2 的 2 就是主版本号,并且过了好久有了重大更新,才变成 Vue3

次要版本

在保证主体功能不变情况下,增加功能则更新次要版本号

补丁版本

小范围内的修修补补则修改补丁版本号

author

这个包的作者,就是你了

license

许可协议,让别人清楚他们有什么权限来使用你的模块通常设置为ISC,意思是不对软件提供任何保证,不对因使用这个包 产生的数据,利润损失而承担任何责任。简单就是,爱用不用,有事也不关我事

注册NPM账户

现在,我们的 npm 包已经完全准备完毕了,我们就可以把包发布上去了

等等,我发布到哪里去??怎么知道这个包是我的?

所以啊,你需要注册 npm 账户啊

注册方法有两种

1、官网注册

https://www.npmjs.com/

2、控制台注册

代码语言:javascript
复制
*/

我就随便注册了一个账户如下

注册成功之后,肯定是要登陆的!

进入你的控制台,输入以下命令

代码语言:javascript
复制
npm login

然后跟着提示输入内容

然后就会显示登陆成功

开始发布

只需一条命令,此时你的包就可以发布了!

代码语言:javascript
复制
npm publish

就是这个!

显示发布成功!上去官网看一下你的包

没错,已经成功了

试下水

既然成功了,我们就要试下水,看能不能用

新建一个目录,然后创建 package.json,然后安装我们的包!

安装成功了,用一哈

新建一个 js 文件,引入我们的包,并调用包导出的函数

然后 运行这个 js 文件

没得问题的啊,一切大功告成!!!

管理NPM包的其他操作

完成上面的步骤,你的包就成功发布了,但是在我平常使用中,对我们自己发布的 npm 包是要进行管理的,比如

更新包,撤销包等等

所以我们同样需要知晓下面这些操作

1、更新包

2、撤销版本

3、废弃包

4、重命名包

5、管理包的维护者

1更新包

更新的命令和发布是一样的

代码语言:javascript
复制
npm publish

更新包的时候,最最重要的就是记得要更新版本号

如果你不记得也没关系,因为你根本推不上去哈哈

而我们要怎么更新版本号?是手动去 package.json 中去修改吗?

当然不是了,这么做太傻批了

我们有特定的指令和包去做这个事情了,详情看另一篇文章

【工具】管理NPM 包版本号

2撤销版本

这很难,一般不推荐这么做,因为如果你的包已经被别人使用了

你直接撤销,别人可能就直接骂娘了

当然了这是你的自由,你可以撤销整个包,也可以撤销某个版本

撤销整个包的时候,需要加上 -f 参数

并且会警告你

代码语言:javascript
复制
npm unpublish 你自己的包名 -f

撤销版本,肯定是需要加版本号的,比如

代码语言:javascript
复制
npm unpublish sky-pig-util-3@1.0.1

你撤销的包,是不能马上 发布的,否则报错,你需要等 24 小时之后

撤销的版本,不能再重新发布,只能修改版本号,否则报错

3废弃版本

废弃和 撤销是不一样的,撤销是完全把包删除,而 废弃是保留包,只是这个包已经被流放了,不管了

所以我们通常在下载一些包的时候,控制台会有提示说

这个包我们已经不维护了,你可以更新到 某某某

所以一般我们推荐使用 废弃包 而不是 撤销包

命令是

代码语言:javascript
复制
npm deprecate <pkg-name>[@<version>] <message>

比如你当前npm 包版本是 v1.0.4,你要放弃 v1.0.3以下的版本(不包含1.0.3),并加上提示(提示不能是中文)

代码语言:javascript
复制
npm deprecate sky-pig-util-3@" <1.0.3" "sorry, this package I buyao le"

注意,上面的大于号和 引号之间有一个空格,如果去掉空格,会在我的电脑上报错

然后当我们再去下载这个版本的时候,就会提示我们啦

4重命名包

有时候你想改个名字,想想以前的命名太傻批了,那么就可以重命名啦

要怎么做呢?额,就是废弃以前的包,然后提交新的。。。。

废弃的命令我们已经说过了,所以我们就拿到旧包名,然后废弃当前所有版本的包,并加上提示,比如

代码语言:javascript
复制
npm deprecate sky-pig-util-3@" <=1.0.4" "WARNING: This project has been renamed to sky-pig-util-4. Install using sky-pig-util-4 instead."

后面有人安装时,就会被提示说,包已经被重命名为 xxx 了,请安装 最新的

然后就是重新发布你重命名后的包

代码语言:javascript
复制
npm publish

但是可能会有点麻烦?所以又有一个包帮我们简化了一下操作,就是

pkg-rename 帮我们自动获取当前版本,最新包名,并且加上完善提示,也不用我们一个个敲指令了

那么下面我们就来使用这个包

1、全局安装一下

代码语言:javascript
复制
npm -g install @tiaanduplessis/pkg-rename

2、然后去 package.json 修改你的包名,然后进入到你的项目目录(package.json 所在的位置),执行下面的命令

代码语言:javascript
复制
pkg-rename 你的旧包名

然后就运行成功了

当然了,我的电脑有个小bug,当我运行这个命令的时候,mmp 提示我

代码语言:javascript
复制
No npm installation detected

什么?npm 没安装?? 卧槽,怎么可能,我明明装了啊??于是我百度,更无语了,一条相关信息都没有????

最后弄了半天没得办法,看了 pkg-rename 的源码,发现一句

作者你特么肯定是在逗我,不看源码我这辈子就这样了

然后发现了他先检测是否安装了 npm,如果没有安装,就提示

No npm installation detected

他用了一个包,is-installed,好像只检测本地包啊,不会检测到全局

没办法,我只好项目里面安装一个 npm,让他检测通过。。。

代码语言:javascript
复制
npm i npm -D

然后就可以了,之后再重新运行命名,成功的话会提示你,然后你再重新 publish 发布一下

5包的维护者

下面就要说怎么去添加和移除包的维护者了,虽然一开始我们可能只写一些小包

自己维护就行了,但是谁知道以后会不会壮大呢?

所以总得提前准备一下哈哈,也很简单,就三个命令

4.1、列出这个包所有的维护者

代码语言:javascript
复制
npm owner ls 包名

4.2、添加维护者

代码语言:javascript
复制
npm owner add 用户名字  包名

为此我还特别去注册了一个用户,来添加上去哈哈

就添加成功啦

4.3、移除维护者

代码语言:javascript
复制
npm owner rm 用户名字  包名

6其他帮助命令

打开一个模块的主页

代码语言:javascript
复制
npm home 包名

比如我打开我的 sky-pig-util-4

代码语言:javascript
复制
npm home sky-pig-util-4

浏览器就会自动打开

打开模块的代码仓库

代码语言:javascript
复制
npm repo 包名

就是直接打开一个链接了

查看你项目所有依赖的模块

他们是否已经有了船新版本

代码语言:javascript
复制
npm outdated

他会去找到你 package.json 里面的依赖,一个个去找他们是否有最新版本,显示信息如下

最后

鉴于本人能力有限,难免会有疏漏错误的地方,请大家多多包涵, 如果有任何描述不当的地方,欢迎后台联系本人,领取红包

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-07-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 神仙朱 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档