如何将vue项目中封装的js方法打包成方法库上传到npm仓库?

作者站长头像
站长
· 阅读数 5

开发中我们往往需要做某些功能,这个功能可能会出现很多次,也会出现在不同的项目。需要使用时候又不想重新写,怎么办呢? 一般把这个特殊的需求功能做成属于自己的组件,当下次需要的我们之间去使用它。那么我们就打包上传到管理库npm。 但是如何把封装的公用js方法打包上传到管理库npm呢? 组件发布npm仓库

回复
1个回答
avatar
test
2024-07-08

Vue2的实现一般来说 分页列表组件 template 部分会使用代码生成器生成。而一些公用的 JS 部分会提取出来以 mixins 的方式去引入。

可以借鉴一些这个低代码框架的思路:JeecgListMixin.js at master · jeecgboot/ant-design-vue-jeecgDepartList.vue at master · jeecgboot/ant-design-vue-jeecg


补充回答,空白项目模板可以是可以上传到 NPM 作为依赖去使用,但是并不合适。要去针对性的更新就会比较繁琐,比如说我其实就只想要改一下吐司部分的一部分业务代码,增加一个 if 判断什么的,那改起来就会很麻烦,或很魔法。

其实如果想要考虑不同项目之间的复用同一个项目模板,其实以远程preset的模式指向一个模板项目会更好一些,里面就可以携带被提取出来的公用 mixinsutils

这样公用的问题解决了,每次新项目也都可以同一个统一的目录结构和代码组织方式 去开发了。想要局部自定义也可以很快的修改并应用。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容