调试以及发布npm组件

news/2024/7/11 1:00:11 标签: npm, 前端, node.js, react.js, es6, js, javascript
开发原因:

由于公司自己的封装到npm的组件有点问题,负责人由在忙其他,就由我去负责改改,中途出了不少问题,记录一下。

一、下载源码

第一步肯定是去git上把组件的源码下载下来,这一步没什么好说,clone下来本地

二、组件调试

第二步就开始有问题了,因为之前没有调试npm组件,不知道如何调试,请教才知道得用到“npm/pnpm link”(我们公司用的是pnpm,后续都直接写pnpmnpm同理)
1. 首先在组件项目中,运行一下 pnpm start(father-build),将当前项目打个包,这个打包的话会输出一个es文件夹。

  1. 组件项目中,运行一下 pnpm link ,这个作用是将这个组件包,注册到自己的电脑的全局依赖目录 (通过 npm root -g 可以查看电脑全局依赖包的目录)
  2. 需要使用组件项目的的项目目录中,运行 pnpm link <包名>,例如我那个组件名叫test(package.json文件的name),这里就运行pnpm link test. 这样就用本地依赖链接上刚刚注册到全局的依赖了,然后就可以引入使用了。
遇到的问题:
 1.如果使用pnpm link 并且项目中也pnpm link 包名了,但是还是没有成功联调上怎么办?
 解:可以试试加上--global ,在注册的时候和链接时的后面都加上--global
  
 2.在上述操作后,依旧没能成功联调
 解:把项目的组件依赖删了,然后重新装一下整个,先pnpm remove <包名> 然后重新install

 3.我在改动组件后,还需要重新link吗?
 解:不需要,link完成后本地包更新全局也会更新,所说只需要pnpm start本地更新一下

三、发布版本

改完代码就需要发布npm包了,上命令
在这里插入图片描述

1.更新版本

pacth、minor、major分别对应版本的第三位,第二位和第一位。
例如版本1.2.3
patch对应第三位,运行这个命令后,3就会变成4然后去发布就是1.2.4,等于是一个小版本。
minor对应第二位,运行版本加一就是1.3.3。
major对应第一位,运行后是2.2.3

2.发布

运行完上述命令后,会更新版本号,并且去发布,但是什么都没配置发布的话,会报错未注册。
原因是自己还没在npm上注册账号,发布的话没有自己的信息
2.1.首先得运行命令:pnpm addUser,然后会弹出账号、密码、邮箱让你输入
2.2.然后再pnpm login去登录,登录完成的话就可以重新运行发布命令了。

遇到的问题:
 1. 运行pnpm addUser报错 "Web login not supported"
 解:可能原因(1)自己有没有改过npm源,比如改成一些私有源
            (2)pnpm/npm版本问题,你可以试试在命令后加上--auth-type=legacy 

 2. 注册时账号输入完成可是输入密码命令行没反应
 解:这是正常原因,为了隐私不会显示,所以看起来一点反应都没,实际是有输入的,登录同理
 
 3. 因为上述原因,运行了好几次命令,版本号加了好几次怎么办
 解:可以通过npm unpublish命令取消发布,就不会加版本号了

四、项目更新组件

剩下的就是更新项目内的组件版本了,重新install一下要更新的包,就完成了


http://www.niftyadmin.cn/n/5361319.html

相关文章

如何用gpt快速做好数据分析?

由于技术限制&#xff0c;目前InfinitePaper AI仅支持上传1份文件&#xff0c;且大小不超过10M。但是&#xff0c;在强大的代码解释器面前&#xff0c;这都是小问题。我们只需要将可能用到的文件打包成压缩文件上传即可&#xff0c;之后要求GPT直接解压就能正常完成后续需求。 …

OpenHarmony—Hap包签名工具

概述 为了保证OpenHarmony应用的完整性和来源可靠&#xff0c;在应用构建时需要对应用进行签名。经过签名的应用才能在真机设备上安装、运行、和调试。developtools_hapsigner仓 提供了签名工具的源码&#xff0c;包含密钥对生成、CSR文件生成、证书生成、Profile文件签名、Ha…

发布订阅模式的应用:解决react中复杂层级的数据交互

以自定义事件为调度中心&#xff0c;创建一个EventCenter类&#xff0c;默认导出一个EventCenter实例 // 调度中心 class EventCenter {constructor() {// 创建一个事件中心&#xff0c;数据模型&#xff1a;{ event : [fn, fn] }this.eventCenter {};}/*** 订阅事件* eventNa…

编程笔记 html5cssjs 074 Javascrip 运算符

编程笔记 html5&css&js 074 Javascrip 运算符 一、Javascript运算符1. 算术运算符2. 赋值运算符3. 一元运算符4. 位运算符5. 关系和比较运算符6. 逻辑运算符7. 条件(三元)运算符8. 属性访问和调用运算符9. 删除、new 和 typeof 运算符 二、Javascript运算符的特点小结 …

Flask 入门4:Flask 模板

1. 前言 Flask 拥有丰富的扩展方法&#xff0c;且都有统一的特点&#xff1a;简单和即学即用。当我们要实现某个功能之前&#xff0c;可以提前去搜一搜这个功能包是否已经存在&#xff0c;这样也能帮助我剩下很多时间。那么要去哪里找到这些扩展包呢&#xff0c;这里推荐两个方…

Kong 代理缓存

Kong实现性能的方式之一是通过缓存。代理缓存插件通过根据可配置的响应代码、内容类型和请求方法缓存响应来加快性能。当启用缓存时&#xff0c;上游服务不会因为重复的请求而陷入困境&#xff0c;因为Kong网关会代表它们使用缓存结果进行响应。可以在特定的Kong网关对象上启用…

Linux:使用grep和more索日志内容排查Bug

grep # 搜索文件内容显示行号 grep -n "要搜索的关键词" 文件名more 快捷键&#xff1a; 空白键&#xff08;space&#xff09;下一页b键 &#xff08;back&#xff09;上一页 示例 # 从第 20 行开始显示文档内容 more 20 文件名参考 linux查看命令 more 、les…

「效果图渲染」效果图与3D影视动画渲染平台

效果图渲染和3D影视动画渲染都是视觉图像渲染的领域应用。效果图渲染主要服务于建筑、室内设计和产品设计等行业&#xff0c;这些领域通常对视觉呈现的精度和细节有较高要求。与之相比&#xff0c;3D影视动画渲染则普遍应用于电影、电视、视频游戏和广告等媒体领域&#xff0c;…