1.介绍
通常一个复杂的前端架构会有多个npm package组成,repo是git仓库。如果多个package放在一个repo仓库中就是monorepo。与之相反的是mutirepo。
目前babel,vue,react等已使用该方式,这些项目第一级目录的内容以脚手架为主,主要内容都在packages目录中,分多个package管理。
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配置:
Preinstall.js中配置 :
3.2建立工作空间
pnmp-workspace.yaml中配置:
3.3建立文件目录进行初始化
如admin,utils,每个都执行npm init,假设每个package的name为smarty-admin,@smarty-admin/utils
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
运行pnpm i @smarty-admin/utils -r --filter smarty-admin