作为前端,对于npm包的使用大家都非常熟悉,所以这里就不多说,只说一下npm包的发布和删除,说之前请大家通过nrm ls,确认一下当前的源,确认一下当前的源,确认一下当前的源,重要的事情说三遍,因为我搞了好几个例子发布成功后去npm官网查看,搜索不到,最后发现使用的是公司的源,最后在公司源地址找到了自己发布的包,也是怕干扰别人,就把错发的包进行了删除。
下面我要说的例子是发布到npm官网的喔!!!!
一、准备工作
在正式开始演示前,我们还需要做两项准备工作
1.注册npm账户
登录 https://www.npmjs.com/signup 注册 一个npm账号
全名:邮箱:用户名:重要!发布scoped包时会用到密码:
2.全局安装nrm
npm install nrm -g
nrm是npm仓库管理的软件,可用于npm仓库的快速切换
nrm 的常用命令:
nrm //展示nrm可用命令
nrm ls //列出已经配置的所有仓库
nrm test //测试所有仓库的响应时间
nrm add<registry><url>//新增仓库
nrm use<registry>//切换仓库
二、npm包的发布
第一步:本地新建一个文件 mkdir npmtestwang
第二步:进入文件npmtestwang
第三步:npm init 初始化一个package.json文件,添加一些项目信息,直到ok
name:填写你这个包的名字,默认是你这个文件夹的名字。不过这里要着重说一下,最好先去npm上找一下有没有同名的包。最好的测试方式就是,在命令行里面输入npm install 你要取的名字,如果报错,那么很好,npm上没有跟你同名的包,你可以放心大胆地把包发布出去。如果成功下载下来了。。。那么很不幸,改名字吧。。。
version:你这个包的版本,默认是1.0.0
description:其实我也不知道是什么,按回车就好了。。。,这个用一句话描述你的包是干嘛用的,比如我就直接:‘a plugin for express.register routes base on file path’
entry point:入口文件,默认是Index.js,你也可以自己填写你自己的文件名
test command:测试命令,这个直接回车就好了,因为目前还不需要这个。
git repository:这个是git仓库地址,如果你的包是先放到github上或者其他git仓库里,这时候你的文件夹里面会存在一个隐藏的.git目录,npm会读到这个目录作为这一项的默认值。如果没有的话,直接回车继续。
keyword:这个是一个重点,这个关系到有多少人会搜到你的npm包。尽量使用贴切的关键字作为这个包的索引。我这个包嘛,第一是在express下工作的,然后又是一个插件plugin,然后又是一个注册路由route用的,而这个路由又是基于文件目录dir,所以很好就得出我的包的索引关键字。
author:写你的账号或者你的github账号吧
license:这个直接回车,开源文件来着。。。
然后它就会问你Are you ok然后我们回到我们的文件目录里面去看一看,发现多出来一个package.json文件
第四步:新建一个index.js,写一个方法,或者你刚才修改了那个entry point的值,那么你这个文件名也跟着改为那个值。将它export。
第五步:然后,最重要的,写好README.md,一个给大家描述你的包的markdown文件,告诉使用者你的包是做什么的。
第六步:用npm登录命令登录一下
第七步:在目录下npm publish发布
第八步:去npm官网查看
三、npm的下载
第九步:以上完成,可以通过npm install 包名 下载。
注意:如果遇到发布成功但是npm官网查不到,请确认包源是否正确。
四、npm的删除/废弃
npm包发布之后可以对包进行废弃和删除操作,废弃和删除的区别在于:
废弃不会将包或者版本从npm仓库删除,仍然可以继续下载安装,并在安装的时候会有警告
删除会将包从npm彻底删除,无法被下载安装
无论是废弃还是删除,都包含2个层面:版本的废弃/删除 包的废弃/删除
(一)废弃
第一步:废弃指定的版本
npm deprecate <pkg>[@<version>]<message>
我们以npmtest为例:npm deprecate npmtest@0.0.1 'test deprecate'
执行之后我们用 npm view wangtest versions 查看版本
记录的版本号并无变化。
第二步:安装废弃版本
切换到项目目录下,执行:npm install npmtest@0.0.1
第三步:node index.js
发现废弃的版本除了安装时候会被警示,并不影响使用。
(二)删除
npm不鼓励任何形式的删除,主要因为我们发布的包可能已经被其他人引用,如果我们删除了此包,其他人重新安装含有我们包的依赖时,出现找不到的问题
基于此,npm做了相关的删除限制:
删除的版本24小时后方可重发!
只有发布72小时之内的包可以删除!
第一步:删除发布的包
npm unpublish npmtest --force
第二步:去官网查找
第三步:在目录下,现将下载的包卸载
npm rm npmtest
然后重新安装
npm install npmtest
结果已经删除的包无法安装
至此,我们完成了npm包整个生命周期的演示过程。
四、npm的迭代
一个npm包发布之后,我们难免会修改一些bug,或者增改一些功能,这就涉及到对npm包的迭代。
npm包的每次迭代都要涉及到两个方面:
内容的变更
版本的变更
(1)更新内容
(2)更新版本
npm的版本知识
npm采用语义化版本,共三位,以’.’隔开,从左至右依次代表:主版本(major)、次要版本(minor)、补丁版本(patch)。例如:
1.0.0
major.minor.patch
关于版本规范
变更版本号的命令:npm version <major | minor | patch>
假如我们本次是次要发布,我们执行命令:npm version minor
执行结果
package.json中的version也已变为1.1.0:
发布:npm publish
我们可以通过命令查看我们包的所有版本:npm view wlj-cli versions
安装更新
1)切换到test-my-pkg目录下:npm up wlj-cli
五、开发npm包本地测试
1、npm link
npm工具包在开发过程中处于不稳定状态不适合发布到线上调试,但是有需要对其功能进行测试,这时npm link命令就发挥了价值
npm link 可以模拟包安装后的状态,它会在系统中做一个快捷方式映射,让本地的npm包像install过一样,可以直接使用.
2、npm link 使用
我的电脑没在全局安装wlj包,现在测试本地包通过npm link 映射到全局
参考:https://blog.csdn.net/weixin_42274805/article/details/123474053
(1) 同一个项目目录下使用
项目和模块在同一个目录下
cd xxx/npm-link-test/vue-elementui-initprogect-master
npm link ../wlj-cli
npm link 操作会在项目(vue-elementui-initprogect-master)的node_modules目录下创建一个wlj-cli超链接,(类似window的快捷方式),链接到npm-link-test/wanglj-cli
生成的虚拟包会根据wlj-cli的package.json进行指定
效果图
(2)不同目录下
项目和模块不在同一个目录下,需要先把模块链接到全局,然后再在项目中链接模块
cd xxx/npm-link-test/wlj-cli
npm link
npm link 操作会在全局 node_modules 目录下创建一个 module-name 的超链接。
// 再去项目
cd xxx/npm-link-test/vue-elementui-initprogect-master
// 通过npm建立链接
npm link wlj-cli
效果图
3、删除npm link
(1) 解除项目和模块的链接
// 进入项目目录,解除链接
cd xxx/npm-link-test/vue-elementui-initprogect-masternpm unlink wlj-cli
效果: 项目目录下的node_modules依赖包中没了wlj-cli包
(2)解除模块的全局链接
// 进入项目目录,解除链接 cd xxx/npm-link-test/wlj-cli
npm unlink wlj-cli
效果图
六、package.json文件中的bin字段解析
参考:https://www.jianshu.com/p/7d8eca54f061?v=1692667589610
bin字段中定义了npm安装到全局后,用户可以使用的所有命令, bin字段配置了命令与文件的映射关系.
bin字段用于注册运行脚本的命令,全局安装后,可在全局执行该命令,命令与脚本之间的映射关系。
七、 npm包发版自动化管理
随着医疗业务的不断壮大,前端也相继抽离出了很多横向通用能力,随之诞生了ui、utils、cli等npm包,但是这些包的开发和发版都不是一个人来维护且发版都是在线下完成,很容易造成包版本混乱以及意向不到的问题发生。因此,急需一套流程管理工具将整个包从开发、入库到编译发版的整个流程串起来,将发版的工作交给流水线帮我们完成。另外,为了适应业务的发展,新起的npm包必须进行前端工程化配置,从标准上保证开发和包的质量。
npm包源码git地址: https://github.com/wangAlisa/wlj-cli
参考文章:https://www.jianshu.com/p/36d3e0e00157
参考文章:https://www.cnblogs.com/shichangchun/p/9702587.html
可以学习的资料:
1.《npm发布包教程(一):从npm说起》
2.《npm发布包教程(二):发布包》
3.《npm发布包教程(三):安装发布包》
4.《npm发布包教程(四):迭代》
5.《npm发布包教程(五):废弃/删除》