pnpm 的 workspace 实现 monorepo 工程 - 快乐的开发者
source link: https://www.cnblogs.com/qiaojie/p/16579156.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前端多个包管理的的方式一般都是采用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、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK