pnpm 的 workspace 实现 monorepo 工程
前言
前端多个包管理的的方式一般都是采用monorepo
的方式去管理,之前都是使用的lerna
的workspace去管理。这段时间包管理切换到了pnpm
上,它也有worksapce,可以支持monorepo
。
monorepo
有的小伙伴可能对monorepo不太了解,我们简单说下:
Monorepo的意思是在版本控制系统的单个代码库里包含了许多项目的代码。这些项目虽然有可能是相关的,但通常在逻辑上是独立的,并由不同的团队维护。
在前端使用角度来看,monorepo
就是把多个工程放到一个 git
仓库中进行管理,因此他们可以共享同一套构建流程、代码规范也可以做到统一,特别是如果存在模块间的相互引用的情况,查看代码、修改bug、调试等会更加方便。
pnpm+workspace
pnpm在这里我们就不过多介绍,有不了解的小伙伴,可以看下官网pnpm.
创建项目
- 建一个项目目录,创建好目录执行
pnpm init
,会在根目录生成一个packaeg.json
文件。
2.创建 pnpm-workspace.yaml
和.npmrc
文件
pnpm-workspace.yaml
- 定义了 工作空间 的根目录,并能够使您从工作空间中包含 / 排除目录 。 默认情况下,包含所有子目录。即使使用了自定义目录位置通配符,根目录下的package目录也总是被包含.
.npmrc
pnpm 从命令行、环境变量和
.npmrc
文件中获取其配置。pnpm config
命令可用于更新和编辑 用户和全局.npmrc
文件的内容。四个相关文件分别为:
- 每个项目的配置文件(
/path/to/my/project/.npmrc
) - 每个工作区的配置文件(包含
pnpm-workspace.yaml
文件的目录) - 每位用户的配置文件(
~/.npmrc
) - 全局配置文件(
/etc/npmrc
)
所有
.npmrc
文件都遵循 INI-formatted 列表,包含key = value
参数。- 每个项目的配置文件(
在这里,我们在.npmrc
文件配置了,engine-strict=true
结合根目录的package.json
中的 engines
字段,可以指定运行的 node 版和 pnpm 版
- 创建packages文件夹,进入目录创建我们子项目,
lowcode-platform
采用umi创建,感兴趣的可以自行去umi官网查看ui-material
采用阿里的低代码物料脚手架创建,感兴趣的可以去看lowcode-engine
我们假设把
ui-material
项目作为基础库,让lowcode-platform
去直接引用ui-material
库,我们可以在根目录执行
pnpm add ui-material -r --filter lowcode-platform
。执行完成之后,我们就可以在
lowcode-platform
项目下直接引用改模块,不需要安装。这里我们用到了三个命令,分别是add
,-r
,--filter
。具体详细内容可以参考官网。add
命令可以参考:pnpm add-r
参数可以参考:pnpm -r, --recursive--filter
参数可以参考:过滤
5.接下来,我们可以在根目录下执行下pnpm i
安装下依赖,配置下启动脚本
"clean-install": "pnpm clean && rm -rf ./{packages}/*/node_modules node_modules && pnpm i",
"dev": "pnpm -F \"lowcode-platform\" dev",
"build": "pnpm -F \"lowcode-platform\" build",
"dev:ui": "pnpm -F \"ui-material\" lowcode:dev",
"build:ui": "pnpm -F \"ui-material\" lowcode:build",
到这里就可以了,你可以配置自己比较方便快捷的命令。
结束语
代码已上传的github,如有需要,可自行下载查看
如果你觉得该文章不错,不妨
1、点赞,让更多的人也能看到这篇内容
2、关注我,让我们成为长期关系
3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章
最新文章
- C#遍历文件夹下所有文件
- 初入网络系列笔记(2)TCP和UDP
- CLion 2016.2.2 注册激活码
- mvc4 ajax.beginform表单验证
- 什么是jsonp
- Hadoop之Storm安装
- Openresty 安装教程
- UESTC 917 方老师的分身IV --求欧拉路径
- Codeforces Round #131 (Div. 2) B. Hometask dp
- 2015北京网络赛 G题 Boxes bfs
- 创建线程(Background Thread)的N种方式
- cocos2dx3.4 导出节点树到XML文件
- lvs负载均衡概述
- spring接入swagger后单元测试报错
- tar、7z(7zip)压缩/解压缩指令的使用
- char、varchar、nchar、nvarchar特点比较
- springmvc 拦截器的使用小结
- 勉励自己--淡定的CrazyDog
- 修改 login的串口重定向
- params over length limit is 20