pnpm、lerna+yarn如何選擇

本文適合對(duì)主流的包管理工具有所了解的小伙伴。

歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～

作者：廣東靚仔

一、前言

本文基于開(kāi)源項(xiàng)目：

https://github.com/pnpm/pnpm

https://github.com/lerna/lerna

1.1 什么是lerna?

1.2 pnpm有哪些特點(diǎn)?

• 速度快
  絕多大數(shù)場(chǎng)景下，速度會(huì)比 npm/yarn 快 2-3 倍
• 高效利用磁盤(pán)空間
  內(nèi)部文件node_modules是從單個(gè)可尋址內(nèi)容的存儲(chǔ)鏈接的
• 支持 monorepo
  用一個(gè) git 倉(cāng)庫(kù)來(lái)管理多個(gè)子項(xiàng)目package
• 嚴(yán)格
  程序包只能訪問(wèn)其中指定的依賴項(xiàng)package.json
• 確定性
  一個(gè)名為的鎖定文件pnpm-lock.yaml
  

二、lerna

錄結(jié)構(gòu)如下:

packages/
├── foo-pkg
│   └── package.json
├── bar-pkg
│   └── package.json
├── baz-pkg
│   └── package.json
└── qux-pkg
    └── package.json

2.1 安裝lerna

  由于lerna會(huì)經(jīng)常使用到，所以這里可以采用全局安裝

npm i -g lerna

2.2 初始化項(xiàng)目

lerna init

初始化完項(xiàng)目后，我們可以看到package.json &lerna.json如下所示：

// package.json
{
"name": "root",
"private": true, // 私有的，不會(huì)被發(fā)布，是管理整個(gè)項(xiàng)目，與要發(fā)布到npm的解耦
"devDependencies": {
"lerna": "^3.15.0"
}
}

// lerna.json
{
"packages": [
"packages/*"
],
"version": "0.0.0"
}

2.3 創(chuàng)建npm包

增加兩個(gè)包@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 // 增加內(nèi)部模塊之間的依賴

2.5 發(fā)布

lerna publish

2.6 依賴包管理

lerna bootstrap --hoist

{
  "packages": [
    "packages/*"
  ],
  "command": {
    "bootstrap": {
      "hoist": true
    }
  },
  "version": "0.0.1-alpha.0"
}

lerna clean

• 完善的工作流
• typescript支持
  
• 風(fēng)格統(tǒng)一的編碼
• 完整的單元測(cè)試
• 一鍵式的發(fā)布機(jī)制
• 完美的更新日志

三、pnpm

常見(jiàn)的目錄結(jié)構(gòu)如下：

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 項(xiàng)目中可以通過(guò) --filter 來(lái)指定 package，進(jìn)而更新包

3.3 pnpm 移除依賴

monorepo 項(xiàng)目中將包從node_modules 和 package.json 中移除，如下：

pnpm uninstall xxxxx --filter package-a

3.4 pnpm 硬連接項(xiàng)目

pnpm link ../xxxxxxx

我們可以使用pnpm、vite構(gòu)建工具來(lái)實(shí)踐一下，可以拿vue3、react17弄個(gè)demo試試。

pnpm可能不是適用于所有項(xiàng)目或所有堆棧的正確工具，但是如果我們想嘗試解決的monorepo相同的問(wèn)題，我們可以考慮將其作為替代方法。

四、總結(jié)

關(guān)注我，一起攜手進(jìn)階

歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～