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

目录

开始

解决

步骤一：

步骤二：

步骤三：

运用

---

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

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

开始

npm install mini-zrender

- - mini-zrender是我自己的项目，是通过解读zrender后的产物，目前已经打包好存在于github上一段时间了 - -

发现报错，根本没有这玩意（这什么玩意，作者上传了吗？？？）

原因：npm官网压根没这个依赖（是的，一直只知道使用，不知其根本，好尴尬）

 

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

解决

• 步骤一：

npm官网上去注册一下（这里截图我就不截了），这是先决条件。

• 步骤二：

终端执行

tips：这里需要将镜像置回原先的registry.npmjs.org（如果不是这个镜像的话）

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的工作原理，感兴趣的小伙伴可以去看看。

---

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

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