为什么要搞monorepo?
随着项目的增加 , 每增加一个项目,就得把以前的项目的一些公共组件复制粘贴过来,非常麻烦. 或者是公共组件的修改了 , 那么其他项目也要跟着修改 , 想想就难受 当然可以搞npm私服 , 当一旦更新 , 每个项目都得install 也麻烦 而monorepo的优点就是 , 公共文件随改随用
开始搞
初始化项目
npm yarn pnpm都可以monorepo , 但npm要8以上 , 老项目要注意一下 这里用pnpm来搞 , 3者用法都差不多 首先用vite建两个要用的项目 , 把项目放app文件夹下 命令为pnpm create vite 目录结构如下 , package用来存公共的模块
my-monorepo
├─ app
│ ├─ project-react
│ └─ project-vue
├─ package
│ └─ common
│ ├─ index.js
│ └─ package.json
├─ pnpm-workspace.yaml
配置workspace
简单来说workspace用来声明需要monorepo的文件夹 在根目录建个 pnpm-workspace.yaml 文件, 内容如下
packages:
- "app/*"
- "package/*"
如果是npm或yarn, init 初始化根目录的 package.json , 加上workspaces
"workspaces": [
"app/*",
"package/*"
]
配置好以后, 我们就可以在根目录 pnpm install , 现在这两个项目就都能跑了 , 他们的一些依赖会被放到外面的node_modules下
package.json
不管是项目 , 还是公共的模块 , 他们的根下都要有package.json文件 , 我们这统称这种文件夹为包. 接下来, 我们需要两个项目都引用common.js , 所以需要init一下 package.json 的name为别的包引用时的名字 ; main则是引用的入口, 其中入口文件必须要有export
"name": "common",
"main": "index.js",
//conmon/index.js
export function commonMethod() {
console.log('每个项目都能用我');
}
现在两个项目引入common 玩一玩看看
//project-vue\src\main.ts
import {commonMethod} from 'common'
commonMethod()
结果报错说 , 报未安装 The following dependencies are imported but could not be resolved: common Are they installed? 不过也的确没安装.... 这里我在安装下 , 在两个项目的dependencies中加入
"dependencies": {
"common": "workspace:*" //这里的*代表使用最新的版本 , 以后就不用改了
//如果是npm 和 yarn
"common": "*"
}
再install一下 现在成功引用!!!!!!
结语
虽然monorepo 能很好的代码复用 , 但随着项目的积累 , 会存在一定的性能问题 这里推荐一下Turborepo , 能够提升性能
简单的入门到此结束, 感谢大家的观看!
