最初准备复习ES6的面向对象编程,然后顺便学了 rolldown打包,顺手提交了github,最后publish到了NPM。一不小心就发布了一个插件。
起初,我新建了一个js文件,写了一个class Canvas{} ,后面的故事就一发不可收拾了。
写过Canvas代码的朋友都应该知道,HTML5的canvas相关的API可谓是非常之多,让开发人员又爱又恨,学了忘,忘了学,下次遇到还需要重头了。
就如同开头的引语,我写了个类名,就在想要实现什么功能?最后还是参考了之前的笔记。我要实现一个可以绘制矩形,三角形,圆形,贝塞尔曲线,文字的类,这样就不用每次看笔记,从讨厌的moveto开始。
然后就有了最初版的main.js文件。又把文件全部丢给了通义灵码,问:还有什么可以扩展的功能?然后就听从建议,让AI扩展了形状事件回调,Canvas画板及保存导出功能。
搞完之后,看着还有,心里美滋滋!又问它还有什么可提升的?结果我卡到了坐标轴功能实现上。算球~ 不浪费事件,AI+我都不能实现的功能,直接阉割了。
“自己的代码自己测”,这是每个程序员开发完之后的第一件事。下面是我用简简单单几行代码实现的几个功能(要得就是简单,放弃原生API)。
偶尔刷视频听到了rolldown打包那是飞快,远远超越了 rollup和webpack。那咋不好好体验一下,不符合我这种性格。找到我的好朋友(DeepSeek),问它怎么使用?
卧槽!搞错了!
搞定,完美,最后配置打包成全平台支持的类型(ESM, CJS, and IIFE)。npm run build,走你~
自己的代码,怎么舍得乱丢!我思考了一翻,决定发布到github,创建仓库,git push~ 完事大吉。
旁边的前端看到我在画canvas,屏幕很炫酷,伸过来一只大“脑袋”。他觉得还不错,问我什么插件,我回答:“我还没来得及发布”。这年头,想偷懒都有人拿棍赶你前行,在同事的淫威下,我不得不发布了我和AI的“结晶”成果。npm publish --access=public ,再见!