一、前言
本文基于开源项目:
主流的包管理工具有pnpm、npm、yarn,lerna有小伙伴用过吗?
1.1 什么是lerna?
Lerna 是一个管理多个 npm 模块的工具,是 Babel 自己用来维护自己的 Monorepo 并开源出的一个项目。优化维护多包的工作流,解决多个包互相依赖,且发布需要手动维护多个包的问题,可以优化使用git和npm管理多包存储库的工作流程。
1.2 pnpm有哪些特点?
pnpm火了好一阵子,我们来看看它以下的特点:
- 速度快绝多大数场景下,速度会比 npm/yarn 快 2-3 倍
- 高效利用磁盘空间内部文件node_modules是从单个可寻址内容的存储链接的
- 支持 monorepo用一个 git 仓库来管理多个子项目package
- 严格程序包只能访问其中指定的依赖项package.json
- 确定性一个名为的锁定文件pnpm-lock.yaml
接下来,我们讲讲这两种包管理工具的使用。
二、lerna
lerna默认将软件包列表初始化为["packages/*"],如下所示:
录结构如下: packages/ ├── foo-pkg │ └── package.json ├── bar-pkg │ └── package.json ├── baz-pkg │ └── package.json └── qux-pkg └── package.json
2.1 安装lerna
由于lerna会经常使用到,所以这里可以采用全局安装
npm i -g lerna
2.2 初始化项目
lerna init
初始化完项目后,我们可以看到package.json &lerna.json如下所示:
// package.json { "name": "root", "private": true, // 私有的,不会被发布,是管理整个项目,与要发布到npm的解耦 "devDependencies": { "lerna": "^3.15.0" } } // lerna.json { "packages": [ "packages/*" ], "version": "0.0.0" }
2.3 创建npm包
增加两个包@mo-demo/cli @mo-demo/cli-shared-utils
lerna create @mo-demo/cli lerna create @mo-demo/cli-shared-utils
2.4 增加模块依赖
分别给相应的 package 增加依赖模块
lerna add chalk // 为所有 package 增加 chalk 模块 lerna add semver --scope @mo-demo/cli-shared-utils // 为 @mo-demo/cli-shared-utils 增加 semver 模块 lerna add @mo-demo/cli-shared-utils --scope @mo-demo/cli // 增加内部模块之间的依赖
2.5 发布
lerna publish
2.6 依赖包管理
我们使用 --hoist 来把每个 package 下的依赖包都提升到工程根目录,来降低安装以及管理的成本
lerna bootstrap --hoist
为了省去每次都输入 --hoist 参数的麻烦,可以在 lerna.json 配置:
{ "packages": [ "packages/*" ], "command": { "bootstrap": { "hoist": true } }, "version": "0.0.1-alpha.0" }
清理之前的安装包,可以使用如下命令:
lerna clean
目前业界有很多团队采用的 monorepo 解决方案是 Lerna 和 yarn 的 workspaces 特性,基于lerna和yarn workspace的monorepo工作流。一般都具有以下功能:
- 完善的工作流
- typescript支持
- 风格统一的编码
- 完整的单元测试
- 一键式的发布机制
- 完美的更新日志
三、pnpm
常见的目录结构如下:
node_modules ├─ foo | ├─ index.js | └─ package.json └─ bar ├─ index.js └─ package.json
3.1 安装pnpm
使用pnpm代替npm / Yarn,顺便用pnpx代替npx,命令如下:
pnpm install pnpx create-react-app my-cool-new-app
3.2 pnpm 更新包
monorepo 项目中可以通过 --filter 来指定 package,进而更新包
3.3 pnpm 移除依赖
monorepo 项目中将包从node_modules 和 package.json 中移除,如下:
pnpm uninstall xxxxx --filter package-a
3.4 pnpm 硬连接项目
pnpm link ../xxxxxxx
我们可以使用pnpm、vite构建工具来实践一下,可以拿vue3、react17弄个demo试试。
pnpm可能不是适用于所有项目或所有堆栈的正确工具,但是如果我们想尝试解决的monorepo相同的问题,我们可以考虑将其作为替代方法。
四、总结
工具是用来辅助我们项目开发的,当我们在选择工具的时候,应该结合团队的使用场景进行抉择。并不是越新的工具越好,当然啦,多尝试多点工具用来做技术学习,提升自己还是挺好的。
欢迎关注微信公众号前端早茶,与广东靓仔携手共同进阶
前端早茶专注前端,一起结伴同行,紧跟业界发展步伐~