npm包管理工具使用场景(npm包管理器是基于什么平台使用的)

在多个项目中,如果有大量相同的业务模块(表单填写)是共用的,但有些业务模块会随着用户需求来增加或减少一些内容,这个时候这些相同的业务模块如何维护?

如何维护项目?

通俗的解决方案是:哪个项目需要这套业务界面就把代码 copy 到哪个项目,很明显这样做是不可取的,尤其是后期的维护成本,深不可测。所以我们想着把共用的模块封装出来,让其他项目引用,修改配置项即可。

对于 Element-plus UI库来说,它算是颗粒度最小的组件了,它有自己的 input、select、checkbox 等,所以,这是最底层的模块组件,不可再拆,我们需要根据自己各自的业务去整理并分拆逻辑单元。
这里存在一个取舍问题,组件越复杂,配置项越多,越臃肿;组件越小,业务逻辑越简单,越不值得单独维护。
如何解决
对于不同的业务组来说,把共用的拆成「业务包」即可,也就是常说的「多包管理」,把相关的项目都放在一个仓库中。这种管理方式也可称为「monorepo」,我们就知道了面临着什么具体的技术问题,就要技术选型了,这个选型很简单。
看了看 Github,发现 vue/core 和 element-plus 的包管理使用的都是 pnpm monorepo 来管理的,所以就不需要犹豫了,直接用起来。
简述解决方案
什么是 pnpm?可以去看下官网,有详细的介绍。接下来,我们来简单安装。
首先需要使用 pnpm 来创建一个项目:
// 创建一个项目pnpm create vite vue-monorepo// 进入目录cd vue-monorepo// 增加一个文件touch pnpm-workspace.yaml
pnpm-workspace.yaml 的文件内容:
    packages:  # all packages in subdirs of packages/ and components/  - \\\'packages/**\\\'
    按操作手册来看,我们需要在项目根目录建立一个 packages 文件夹,然后创建咱们想共用的模块文件,比如我需要创建一个 basic 的模块:
    // 创建目录mkdir basic// 进入目录cd basic  // 初始化 npm   npm init
    这里的初始化是针对于这个模块包的 package.json 初始化,初始化完成后,我们会得到当前这个模块的 package.json 文件,我们填写好模块名、版本号、入口文件、注释等等信息。
    现在我们的目录共有两层。一层为根目录,当前的项目目录;另一层为 packages 目录,共用包目录。
    当我们需要在根目录安装其他依赖包的时候,则使用:
    pnpm i element-plus  -w
    当我们需要共有模块相互依赖的话,安装的时候就需要指定 –filter 。
    pnpm i cuishunbiao-basic -r --filter cuishunbiao-patient
    当我们把 basic 这个模块包开发完成后,就可以通过 npm 发布出去,大体逻辑就是这样。
    上面的内容,可通过官网来操作下,很简单,困难的事情在后面,随后我会分享下关于 Vue 多包管理的代码逻辑。

    以上代码都可在 Github 上找到,如果和现在代码有出入,那就是我又更新代码啦。https://github.com/cuishunbiao/vue-monorepo

    图片授权基于 www.pixabay.com 相关协议

    参考项目:

    https://pnpm.io/zh/workspaces

    https://donaldxdonald.xyz/post/programming/interesting/monorepopart2

    https://github.com/vuejs/core

    https://github.com/element-plus/element-plus

    https://github.com/hug-sun/element3

    原创文章,作者:小道研究,如若转载,请注明出处:https://www.sudun.com/ask/34536.html

    (0)
    小道研究's avatar小道研究
    上一篇 2024年4月17日 下午6:29
    下一篇 2024年4月17日 下午6:31

    相关推荐

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注