技能之发布自己的依赖到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的工作原理,感兴趣的小伙伴可以去看看。


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

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

相关推荐
秋沐6 分钟前
微前端-MicroApp
前端·react.js·webpack·前端框架·npm
Jiaberrr11 分钟前
打造双层环形图:基础与高级渐变效果的应用
前端·javascript·vue.js·信息可视化·echarts
GISer_Jing34 分钟前
React前端面试题详解(一)
前端·react.js·前端框架
呵呵哒( ̄▽ ̄)"34 分钟前
React 实战选择互动特效小功能
前端·javascript·react.js
Python私教39 分钟前
Docker化部署Django:高效、可扩展的Web应用部署策略
前端·docker·django
查拉图斯特拉面条1 小时前
前端页面元素定位与XPath优化
前端·ui·自动化
刺客-Andy1 小时前
React第十节组件之间传值之context
前端·javascript·react.js
顾北川_野1 小时前
Android 12.0 通知--PendingIntent基本代码
java·前端·javascript
C.果栗子1 小时前
前端页面或弹窗在线预览文件的N种方式
前端
Master_清欢1 小时前
防止按钮被频繁点击
开发语言·前端·javascript