目錄
- 前言
- 認(rèn)識 workspaces
- 如何給模塊安裝依賴
- 移除依賴
- 執(zhí)行模塊里面的 scripts
- monorepo
前言
作為一個前端果录，在工程化的項目里你肯定使用過很多很多的 npm package巍实，不知道你有沒有嘗試開發(fā)過 npm package 或者研究下 npm package 的開發(fā)流程，如果你又經(jīng)驗敞掘，那么你一定很的熟悉 npm-link 這個命令。
我們本地化開發(fā) npm package 不可能每次改了代碼，都發(fā)布到 npm 商場去锉走，所以 npm 提供給我們 npm-link 這個命令用來進行本地化開發(fā)。
但是 npm-link 有個缺點不利于調(diào)試代碼藕届，我們基本上必須開兩個編輯器挪蹭，一個編輯器改開發(fā) package 的代碼，另一個編輯器用來調(diào)試休偶，照此推理嚣潜，我們開發(fā)組件庫幾十個組件，難道要開幾十個窗口椅贱，No，這不科學(xué)只冻。
當(dāng)然我們也可以把開發(fā) package 的代碼目錄拖到調(diào)試目錄中庇麦，來變相模擬 workspaces。
那就要問了喜德，我們最理想開發(fā)目錄是什么樣子的山橄；我們肯定想開發(fā)和調(diào)試在同一個項目下，等開發(fā)調(diào)試完成任何目錄都不用動舍悯，直接發(fā)布就行了航棱，而 npm 的新特性 workspaces 正好滿足。
注意：workspaces 是 npm v7.x 也就是 Node@15.0.0 新增的功能萌衬，所以請保持你的本地環(huán)境版本大于它們饮醇。
認(rèn)識 workspaces
現(xiàn)在假如我們開發(fā)一個 npm package 叫 calculator （計算器），且它只有四個基本的功能——加減乘除秕豫，我們看看在 workspaces 中如何對 calculator 進行調(diào)試朴艰。
- 首先創(chuàng)建一個目錄同時初始化一個 package.json：
? Desktop mkdir calculator && cd calculator && npm init
- 創(chuàng)建加減乘除模塊包
分別執(zhí)行命令（一個一個創(chuàng)建）：
$ npm init -w packages/plus -y
$ npm init -w packages/minus -y
$ npm init -w packages/times -y
$ npm init -w packages/divide -y
也可以簡單點，用一條命令：
$ npm init -w packages/plus -w packages/minus -w packages/times -w packages/divide -y
這個時候目錄變成了：
? calculator tree
.
├── package.json
└── packages
├── divide
│ └── package.json
├── minus
│ └── package.json
├── plus
│ └── package.json
└── times
└── package.json
5 directories, 5 files
同時根目錄下的 package.json 新增了 workspaces 字段：
"workspaces": [
"packages/plus",
"packages/minus",
"packages/times",
"packages/divide"
]
如果我們不想讓 workspaces 字段太多混移，可以改成這樣：
"workspaces": [
"packages/*"
]
workspaces 字段是留給 npm install 來創(chuàng)建軟連接使用的祠墅，下面會講到。
- 新增五個文件
新增五個 index.js 文件歌径，目錄現(xiàn)在如下：
? calculator tree
.
├── package.json
├── packages
│ ├── divide
│ │ ├── index.js
│ │ └── package.json
│ ├── minus
│ │ ├── index.js
│ │ └── package.json
│ ├── plus
│ │ ├── index.js
│ │ └── package.json
│ └── times
│ ├── index.js
│ └── package.json
└── index.js
5 directories, 10 files
為了支持 ESM 我們手動改寫所有 package.json 新增一個字段：
"type": "module",
- 模塊的實現(xiàn)
我們這里給出加法的代碼毁嗦，plus 目錄的 index.js 文件內(nèi)容:
export default (a, b) => a + b;
其他三個函數(shù)同理。
- 驗證程序的正確性
我們怎么驗證程序的正確性呢回铛，當(dāng)然是分別調(diào)用四個模塊驗證了狗准，所以 安裝四個模塊克锣，執(zhí)行命令：
npm install
熟悉的 node_modules 文件夾出現(xiàn)了，但是里面的文件夾和常見的卻有所不同驶俊。
通過命令行終端甚至看的更清楚些：
其實就是把 node_modules 這四個文件夾鏈接到了 packages 目錄下對應(yīng)的文件夾娶耍，這是一種軟鏈接技術(shù)（即讓 packages 里面的所有模塊都軟鏈到 node_modules 目錄），就像 Windows 桌面的快捷方式一樣饼酿。注意榕酒，我們更改 packages 文件夾下的文件 node_modules 文件夾自動更新。
根目錄下 index.js 文件里調(diào)試加法：
import plus from "plus";
console.log(`1 + 1 = ${plus(1, 1)}`)
其他三個方法類似使用故俐，不再演示想鹰。
如何給模塊安裝依賴
比如除法使用 number-precision 保留精度：
$ npm install number-precision --workspace divide
# 也可簡寫為
$ npm i number-precision -w divide
如果要給所有模塊同時安裝 dayjs 這個依賴：
# 注意 workspaces 這里多個 `s`
$ npm install dayjs --workspaces
# 也可簡寫為
$ npm i dayjs -ws
移除依賴
將 divide 模塊中的 number-precision 依賴移除：
? calculator npm uninstall number-precision -w divide
執(zhí)行模塊里面的 scripts
假設(shè) divide 模塊包里面的 package.json 文件中 scripts 字段為：
{
"scripts": {
"dev": "node index.js"
}
}
那么可以通過下面的命令啟動 divide 模塊包里面的 dev 腳本
$ npm run dev -w divide
OK，workspaces 的基本使用差不多就是辣么多药版，使用 workspaces 進行開發(fā)調(diào)試只是小菜辑舷，接下來看看 workspaces 真正的核心應(yīng)用。
monorepo
monorepo 即單體倉庫槽片，這里有一份學(xué)習(xí)資料何缓，https://semaphoreci.com/blog/what-is-monorepo
如果你經(jīng)常在 GitHub 上學(xué)習(xí)，你會發(fā)現(xiàn)前端很多庫的源碼都是 monorepo 架構(gòu)的还栓，比如說 Vue碌廓、React 等等。
之所以 monorepo 流行就在于剩盒，項目過大管理進入了困難谷婆，如果維護一個單體倉庫太過龐大了，維護多個倉庫又太過繁瑣辽聊，所以 monorepo 出來了纪挎，讓你維護一個倉庫，但是一個倉庫切分為好多個 packages跟匆，這樣便于你維護的同時异袄，部分功能也好切割出去，之前 monorepo 最好的工具是 yarn 贾铝，現(xiàn)在好了 npm 已經(jīng)開始原生支持了隙轻。
總結(jié)
今天，我們學(xué)習(xí)通過 workspaces 替代 npm link 調(diào)試的新方式垢揩，讓你不在飽受切編輯器之苦玖绿，但 workspaces 真正大放異彩的地方，確實和 monorepo 配合使用叁巨，作為流行庫組織代碼的流行方式斑匪。
