为了方便,我改了别人的轮子😅

简介: 为了方便,我改了别人的轮子😅

前言🖖


  • 本文主要解决了如何在node_modules中第三方模块的修改使用
  • 如果可以的话发布一个新的轮子来使用
  • 在解决的过程中也遇到了许多的问题以此来记录一下


需求安排🏝️


  • 风和日丽的一天,需求找到我让我给客户的系统做一个类似yapi的接口管理


  • 大致看了下对于预览和编辑就是两个切换tab配合一些表单和表格
  • 其中可能难搞的应该是这个json和jsonschema的转化了

目前有两个方案

1. 自己手写一个(时间久) 2. 参考社区大佬的轮子来做修改使用(可能不完全符合) 复制代码

  • 对于这种有复杂数据结构和互相影响的交互场景非常之多的情况
  • 还要统一组件之间的样式和适配,对于摸鱼选手的我短时间大概率是做不出来的
  • 巧了!在网上找到一位大佬写的json-schema-editor-vue刚好符合基本的功能,除了样式其他大致功能都是符合的
  • 于是乎也没想这么多直接开干😏


成品效果


奇怪的需求增加了🤧


  • 第二天早上起床就感觉右眼不舒服一直在间断的跳动
  • 果不其然之前的担心还是来了,需求找到我说你这个不行呀改了标题没有效果呀


  • 把编辑的接口参数进行打印发现这个标题传的参数是title 而后端要接受的是description
  • 这时我就知道麻烦来了如果这里要显示备注然后代表的参数是description的话那我需要改源码
  • 可是这是别的大佬写的轮子我有什么办法更改呢?
  • 现在就是需要将标题两个字改成备注,把title改成description

目前有两个方案

1. 直接修改`node_modules`包里的`js`文件把其中需要改的给改了(包里全是压缩文件不好改) 2. 找到这个轮子的源码修改并发布一个新轮子(没有尝试过造轮子) 复制代码

  • 当我找到node_modules的对应包文件,我直接否决了第一种方案,里面全是压缩后的js根本不好改,即使这个简单的需求改好了以后万一还有其他复杂需求就没办法解决了,更何况如果改了这里的文件,每次下载依赖的时候都要手动改一遍,太不实际了,更别说之后要做自动化部署了。


尝试改轮子🏖️


  • 我寻思着我之前也没造过轮子也没发布过npm包不如趁这个机会学习一下
  • 上网查阅资料后发现,其实上传一个轮子也不难,难的是做一个好的轮子出来
  • 打开之前json-schema-editor-vuegithub地址把源码clone下来研究
  • 打开源码之后就是熟悉cli的感觉,很快啊找到对应的文件进行组件修改🤙
  • 修改后对应着齐齐npm配置尝试发布一个npm


发布成功✈️


  • 把配置都修改完成


  • 运行npm run lib成功打包生成压缩版的文件


  • 注册一个npm账号并登陆


  • 成功发布npm


  • 在官网的账号里也查的到上传的轮子


  • 这样一来所有的准备都结束了,接下来只需要在自己的项目中下载自己的轮子进行使用就好了~~

成品效果

写在最后👋


  • 为了想让自己巩固一下于是写下了这篇文章,但是好像写着写着又变成流水账了哈哈哈😅
  • 但是没有关系至少我是有收获的,之前没有接触过造轮子一直都感觉造轮子的人都很厉害
  • 这次真正看了大佬的轮子源码后发现有很多优秀的习惯和封装都值得自己去学习
  • 发布轮子不难但是真正用心做一个轮子的老哥们都很厉害这也是我要去学习的,希望有一天我也可以做出很合理的封装很合理的组件化💦
  • 如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😛


相关文章
|
8月前
|
缓存 NoSQL 数据库
总结 做项目的一点自己的想法 在开发中我觉得可以修改的地方
总结 做项目的一点自己的想法 在开发中我觉得可以修改的地方
41 1
|
8月前
|
JavaScript API
【源码共读】组件太多,重复工作量大?这次一行命令带你解放双手!
【源码共读】组件太多,重复工作量大?这次一行命令带你解放双手!
77 0
|
JavaScript 前端开发 Java
前端项目里常见的十种报错及其解决办法
前端项目里常见的十种报错及其解决办法
336 0
|
C语言
C项目(贪吃蛇BUG解决及功能扩展)
C项目(贪吃蛇BUG解决及功能扩展)
152 0
|
运维 监控 Shell
太牛了!100个Shell脚本实例,代码清晰拿来就能用,再也不怕写不对了!
太牛了!100个Shell脚本实例,代码清晰拿来就能用,再也不怕写不对了!
|
JavaScript 知识图谱
修改第三方插件或库的源码经验技巧总结
修改第三方插件或库的源码经验技巧总结
修改第三方插件或库的源码经验技巧总结
|
前端开发 计算机视觉 Python
代码报错还好说,源码报错才难搞!分享自己源码报错的解决过程!
代码报错还好说,源码报错才难搞!分享自己源码报错的解决过程!
146 0
代码报错还好说,源码报错才难搞!分享自己源码报错的解决过程!
|
数据库
代码写的垃圾被嫌弃?这 3 个插件你值得拥有…
今天推荐三个插件,它们都是代码质量检测的神器。可以扫描检测出你项目中不符合规范的代码,他们分别是 SonarLint、SonarQube、Alibaba代码规约插件。
241 0
代码写的垃圾被嫌弃?这 3 个插件你值得拥有…
|
Web App开发 JSON JavaScript
仅20+行核心代码的Chrome插件,这不是有手就行吗?(上)
大家好,我是零一,不知道你们有没有开发过Chrome插件,但你们一定用得很多。其实Chrome插件的开发一点都不麻烦,基本就是有手就行,一个功能极简的插件核心代码也就不过30行左右。那你还怕不会插件的开发吗? 本文将手把手(真 · 手把手)介绍Chrome插件的开发,并末尾附带一个插件实战教学
410 0
仅20+行核心代码的Chrome插件,这不是有手就行吗?(上)