前端工程化-Monorepo

119 阅读1分钟

1.介绍

通常一个复杂的前端架构会有多个npm package组成,repo是git仓库。如果多个package放在一个repo仓库中就是monorepo。与之相反的是mutirepo。 image.png 目前babel,vue,react等已使用该方式,这些项目第一级目录的内容以脚手架为主,主要内容都在packages目录中,分多个package管理。 image.png

2.优点

统一的工作流和code sharing。如学习一个package代码,了解某段逻辑,不需要找它的repo,直接在当前repo;当某个需求修改多个package时,无需到各自的repo进行修改,测试,可以直接在当前repo修改,测试。只需一套脚手架,就可以管理多个package。

  • 工作流一致性
  • 项目基建成本低
  • 降低以来管理的复杂度
  • 使用Pnmp进行实践

3.使用Pnmp进行实践

3.1禁用npm

使用pnmp的monorepo项目在node_modules和开发中,项目依赖pnpm workspace是使用npm或者yarn会出现问题。在package.josn配置:

image.png Preinstall.js中配置 : image.png

3.2建立工作空间

pnmp-workspace.yaml中配置: image.png

3.3建立文件目录进行初始化

如admin,utils,每个都执行npm init,假设每个package的name为smarty-admin,@smarty-admin/utils image.png

3.4四种安装方式

  • pnmp i vue -w  (所有软件包进行依赖)
  • pnpm i react -r --filter smarty-admin (文件单独依赖)
  • cd packages/admin  pnpm i react(进入每个包单独下载)
  • 依赖本地软件包(smarty-admin依赖@smarty-admin/utils) 创建utils.js image.png 运行pnpm i @smarty-admin/utils -r --filter smarty-admin image.png