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


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

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

相关推荐
x_chengqq3 小时前
前端批量下载文件
前端
捕鲸叉5 小时前
QT自定义工具条渐变背景颜色一例
开发语言·前端·c++·qt
傻小胖5 小时前
路由组件与一般组件的区别
前端·vue.js·react.js
Elena_Lucky_baby5 小时前
在Vue3项目中使用svg-sprite-loader
开发语言·前端·javascript
重生之搬砖忍者6 小时前
uniapp使用canvas生成订单小票图片
前端·javascript·canva可画
万水千山走遍TML6 小时前
console.log封装
前端·javascript·typescript·node·log·console·打印封装
阿雄不会写代码6 小时前
使用java springboot 使用 Redis 作为消息队列
前端·bootstrap·html
m0_748236587 小时前
【Nginx 】Nginx 部署前端 vue 项目
前端·vue.js·nginx
@C宝7 小时前
【前端面试题】前端中的两个外边距bug以及什么是BFC
前端·bug
Burt7 小时前
@antfu/eslint 支持 globals 全局变量
前端·uni-app·eslint