Monorepo的入门—— 采用pnpm构建一个demo
Monorepo大家应该都听过,并且知道一些优秀开源项目都是使用Monorepo的方式管理项目的,比如Vue3、Vite、ElementPlus等,同时这几个项目都是采用pnpm作为包管理工具。
前言
Monorepo
大家应该都听过,并且知道一些优秀开源项目都是使用Monorepo
的方式管理项目的,比如Vue3
、Vite
、ElementPlus
等,同时这几个项目都是采用pnpm
作为包管理工具。
Monorepo
是什么?
Monorepo
是指包含多个不同项目的单个仓库,且这些项目之间具有良好的关系。具体可以参考你所需要了解的关于 Monorepo 的一切这篇文章。
pnpm
是什么?
快速的,节省磁盘空间的包管理工具。参考官方文档。
pnpm
构建Monorepo
的demo
1、安装pnpm
这里使用npm
安装
npm install -g pnpm
2、创建目录并初始化
// 创建monorepo-pnpm-demo目录
mkdir monorepo-pnpm-demo
// 在monorepo-pnpm-demo根目录下,初始化
pnpm init
如图所示:
修改一下package.json
里面的内容,加一个type
字段,使用ESModule模块化规范。
代码如下:
{
"name": "monorepo-pnpm-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"type": "module",
"keywords": [],
"author": "",
"license": "ISC"
}
3、创建pnpm-workspace.yaml
文件
这个文件定义了工作空间的根目录。
packages:
- 'packages/**'
接下来,在packages
文件夹中创建多个项目,目录结构如下:
4、写packages
下每个项目的package.json
主要是name
字段,方便以后使用。
packages/components这个项目下的package.json
{
"name": "@packages/components",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"type": "module",
"license": "ISC"
}
packages/utils这个项目下的package.json
{
"name": "@packages/utils",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"type": "module",
"license": "ISC",
"dependencies": {
"dayjs": "^1.11.4",
"lodash": "^4.17.21"
}
}
5、安装dependencies
如果在根目录下安装依赖的话,这个依赖可以在所有的packages中使用。如果需要为具体的一个package安装依赖,如何处理?
pnpm --filter @packages/utils install dayjs
上面命令表明:在@packages/utils
中安装dayjs
。其中--filter
过滤包名,具体使用可以参考pnpm --filter。
6、packageA
中引用packageB
首先,在packages/utils/index.js
中export
一个格式化日期函数,代码如下:
import dayjs from 'dayjs'
export function formatDate(value, format = 'YYYY-MM-DD') {
return dayjs(value).format(format)
}
然后执行如下命令:
pnpm -F @packages/components install @packages/utils
-F等价于–filter
这个命令表示在@packages/components
安装@packages/utils
。
这个时候,packages/components这个项目下的package.json
发生了变化,多了dependencies
。
{
"name": "@packages/components",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"type": "module",
"license": "ISC",
"dependencies": {
"@packages/utils": "workspace:^1.0.0"
}
}
最后,在packages/components/index.js
中写入如下代码:
import { formatDate } from '@packages/utils'
console.log(formatDate(new Date()))
然后在项目根目录运行如下命令:
node packages/components
控制台会打印出当前日期。
更多推荐
所有评论(0)