Skip to content
On this page

背景

随着项目的增多,代码复用变得格外的重要,为了更加方便的管理好通用的js工具库和常用的一些ui组件,建立一个独立的仓库用来统一管理这些模块。

包划分思路

所有的包都放在packages文件夹下面,可以按照功能或者按照需求分,每一个包都单独有一个package.json文件,这样之后视情况可以发布到npm上面。 暂时有以下两个包:

  • @nw-design/ui封装的通用的ui组件库
  • @nw-design/utils封装的通用的js方法

monorepo

所有的前端复用的包都放在一个仓库下面,避免每个包都要单独新建仓库以及下载大量依赖和构建工具,代码风格也可以全部统一

基于 monorepo 的仓库管理方式,我们能够更好的处理包和包之间的依赖关系,避免了以往单一仓库的一些痛点:

  • 组件耦合严重,组件代码量大
  • 业务开发分工不明确,业务开发人员要关心非业务的代码
  • 编译慢,效率低
  • 相关包基础依赖可能会重复打包,如: lodash,moment...
  • 管理、调试、追踪bug困难
  • 不同项目可能存在技术栈不统一,如:状态管理,less,sass
  • 分支管理混乱
  • 多包多项目之间依赖关系复杂
  • 第三方依赖库版本可能不一致
  • 占用总空间大
  • 不利于团队协作
  • 无法针对主应用统一跑测试用例,发布时很难避免一些基本的错误发生
  • 需要频繁切换项目

使用的技术栈

Last updated: