pnpm、lerna+yarn如何选择
前端大神之路
共 3282字，需浏览 7分钟
·
2021-04-21 22:29
本文适合对主流的包管理工具有所了解的小伙伴。
欢迎关注前端早茶，与广东靓仔携手共同进阶～
作者：广东靓仔
一、前言
本文基于开源项目：
https://github.com/pnpm/pnpm
https://github.com/lerna/lerna
1.1 什么是lerna?
1.2 pnpm有哪些特点?
速度快 绝多大数场景下，速度会比 npm/yarn 快 2-3 倍 高效利用磁盘空间 内部文件node_modules是从单个可寻址内容的存储链接的 支持 monorepo 用一个 git 仓库来管理多个子项目package 严格 程序包只能访问其中指定的依赖项package.json 确定性 一个名为的锁定文件pnpm-lock.yaml
二、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 增加模块依赖
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 依赖包管理
lerna bootstrap --hoist
{
"packages": [
"packages/*"
],
"command": {
"bootstrap": {
"hoist": true
}
},
"version": "0.0.1-alpha.0"
}
lerna clean完善的工作流 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相同的问题，我们可以考虑将其作为替代方法。
四、总结
关注我，一起携手进阶
欢迎关注前端早茶，与广东靓仔携手共同进阶～
评论