pnpm、lerna+yarn如何选择-技术圈

pnpm、lerna+yarn如何选择

前端大神之路

共 3282字，需浏览 7分钟

· 2021-04-21

本文适合对主流的包管理工具有所了解的小伙伴。

欢迎关注前端早茶，与广东靓仔携手共同进阶～

作者：广东靓仔

一、前言

本文基于开源项目：

https://github.com/pnpm/pnpm
https://github.com/lerna/lerna

主流的包管理工具有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相同的问题，我们可以考虑将其作为替代方法。

四、总结

工具是用来辅助我们项目开发的，当我们在选择工具的时候，应该结合团队的使用场景进行抉择。并不是越新的工具越好，当然啦，多尝试多点工具用来做技术学习，提升自己还是挺好的。

关注我，一起携手进阶

欢迎关注前端早茶，与广东靓仔携手共同进阶～