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


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

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

相关推荐
wearegogog1232 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
Drawing stars2 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
品克缤2 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小二·2 小时前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°2 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
qq_419854053 小时前
CSS动效
前端·javascript·css
烛阴3 小时前
3D字体TextGeometry
前端·webgl·three.js
桜吹雪3 小时前
markstream-vue实战踩坑笔记
前端
C_心欲无痕3 小时前
nginx - 实现域名跳转的几种方式
运维·前端·nginx
花哥码天下4 小时前
恢复网站console.log的脚本
前端·javascript·vue.js