技能之发布自己的依赖到npm上

目录

开始

解决

步骤一:

步骤二:

步骤三:

运用


一直以为自己的项目在github上有了(之传了github)就可以进行npm install下载,有没有和我一样萌萌的同学。没事,萌萌乎乎的不犯罪。

偶然的机会,我突然想到,自己的依赖能不能下载?于是,对于自己的新篇章开始了!!

开始

bash 复制代码
npm install mini-zrender
    • mini-zrender是我自己的项目,是通过解读zrender后的产物,目前已经打包好存在于github上一段时间了 - -

发现报错,根本没有这玩意(这什么玩意,作者上传了吗???)

原因:npm官网压根没这个依赖(是的,一直只知道使用,不知其根本,好尴尬)
npm官网找了一圈,压根搜不到~

那么如何才能达到我们的目的呢?

解决

步骤一:

npm官网上去注册一下(这里截图我就不截了),这是先决条件。

步骤二:

终端执行

tips:这里需要将镜像置回原先的registry.npmjs.org(如果不是这个镜像的话)

bash 复制代码
npm login

莫名其妙的错误:出现这种错误一定要看看设置对不对,因为我搜了半天最后发现是协议问题,http改成https就好了~~(经验--出现这种错误基本是自己的code或者配置有问题,重头看看!!!)

https://registry.npmjs.org/

这个问题是一次性密码设置:

设置2FA

下载App:这里直接推荐Microsoft Authenticator,支持Android和iOS

将这么长一串复制到Enter one-time password from your authenticator app:就可以登录成功了

步骤三:

执行npm publish(每次发布的时候package.json 里面的 version不能一样,不然不能发布出去,手动改下版本就行),如果没报错在自己的Packages中就能搜到了

OK,根本原因解决了。然后我们来看看使用方面有没有问题!!!

运用

来看看在实际工程中如何运用,我这边直接通过vite脚手架创建了一个新工程,然后把zrender和mini-zrender都install进我的工程里面

先顺利的把它install进我们自己的工程(说明前面的publish生效了,能找到这个依赖)

不需要花里胡哨的,直接在App.vue暴力使用,高效的看到效果。

贝塞尔曲线的效果展示出来了,说明我们这一套流程下来就形成闭合了。站在不同的角度,我们的眼界和思维方式都会不一样,之前从未尝试发布过依赖包,如今这个新世界感觉还是挺友善的。

至于mini-render的代码怎么写的,为什么可以实现这样的贝塞尔曲线。可以参考我的专栏文章

你真的了解Canvas吗--解密一【ZRender篇】这篇可以试读。

你真的了解Canvas吗--解密xx【ZRender篇】系列的文章

如今已经更新到第十四篇了,里面深刻解读zrender的工作原理,感兴趣的小伙伴可以去看看。


好了,今天的分享就到这里。

如果觉得有收获,麻烦给个赞和关注。你的鼓励是我写作的动力,大家一起学习一起进步。

相关推荐
wuk99810 小时前
实现ROS系统的Websocket传输,向Web应用推送sensor_msgs::Image数据
前端·websocket·网络协议
合作小小程序员小小店12 小时前
web网页开发,在线%考试管理%系统,基于Idea,vscode,html,css,vue,java,maven,springboot,mysql
java·前端·系统架构·vue·intellij-idea·springboot
天天进步201512 小时前
CSS Grid与Flexbox:2025年响应式布局终极指南
前端·css
Boop_wu13 小时前
[Java EE] 计算机基础
java·服务器·前端
Novlan113 小时前
TDesign UniApp 组件库来了
前端
用户479492835691513 小时前
React DevTools 组件名乱码?揭秘从开发到生产的代码变形记
前端·react.js
顾安r14 小时前
11.8 脚本网页 打砖块max
服务器·前端·html·css3
倚栏听风雨14 小时前
typescript 方法前面加* 是什么意思
前端
狮子不白14 小时前
C#WEB 防重复提交控制
开发语言·前端·程序人生·c#
菜鸟‍14 小时前
【前端学习】阿里前端面试题
前端·javascript·学习