npm和yarn是幹什麼用的?大家好，我是前端西瓜哥最近在研究 React 源碼，用到了 yarn link 命令來鍊接兩個項目，接下來我們就來聊聊關于npm和yarn是幹什麼用的?以下内容大家不妨參考一二希望能幫到您!

npm和yarn是幹什麼用的

大家好，我是前端西瓜哥。最近在研究 React 源碼，用到了 yarn link 命令來鍊接兩個項目。

我對其底層原理産生了興趣，所以寫了這麼一篇文章，希望能夠通過故事的形式，來讓大家理解 yarn link 的使用場景和用法。

另外 npm link 和 yarn link 的效果是相同的，下文就不提及 npm link 了。

有一天，小瓜維護的一個名為 xigua 的 NPM 包，被人提了 issue。小瓜看了下問題描述，憑着對項目的熟悉，他大概知道是哪裡出了問題。

為了測試，小瓜搭建了一個 demo-project 項目，且這個項目通過 yarn add xiga 安裝了這個包，并在代碼中使用了它。

└── demo-project └── node_modules ├── apple └── xigua ├── old.js └── package.json

理論上，小瓜去這個 demo-project 項目的 node_module/xigua 目錄下直接修改代碼就好了。

但不幸的是，裡面的代碼是編譯出來的，無法直接修改。

小瓜于是跑到了 xigua-project 包的源碼項目中，運行了一個可以監聽源碼修改生成 npm 包内容的命令。小瓜修改了一處代碼，然後自動編譯到了 xigua-project/build/ 中。

└── xigua-project └── build └── xigua（編譯出來的文件夾） ├── fix.js └── package.json

然後小瓜就複制編譯好的代碼，覆蓋掉原來的 demo-project/node_module/xigua ，然後看看效果不對。小瓜發現不對，再改，然後再複制，一連重複了好幾次。

“我受不了了，得想個辦法。”小瓜說。每次編譯完都要手動進行複制操作，太搞人心态了。

機智的小瓜一番思考，最終想到了一個辦法。

1. 将 demo-project 下的 xigua 依賴包删除
2. 然後創建一個 xigua 軟鍊接文件，鍊接到 xigua-project 下的編譯文件夾（軟鍊接可以理解為快捷方式文件，可以将文件位置重定向）

├── demo-project │ └── node_modules │ ├── apple │ └── xigua（重定向） -> /xigua/build/node_modules/xigua └── xigua-project └── build └── xigua（被鍊接的位置） ├── fix.js └── package.json

利用軟鍊接，我們将兩個項目關聯了起來。

此時，舍友小潤抱着他的猹路過了，猹是他的貓的名字。

小瓜正對自己的奇思妙想沾沾自喜，立馬向小潤吹噓起來。

小潤：“這個需求，包管理器是有相關命令支持的。”

小瓜：“居然有！展開說說怎麼用。”

小潤于是講解了起來。

其實很簡單，我們進入到 xigua/build/xigua 目錄下，執行 yarn link

$yarnlink yarnlinkv1.22.17 successRegistered"xigua". infoYoucannowrun`yarnlink"xigua"`intheprojectswhereyouwanttousethispackageanditwillbeusedinstead. ✨Donein0.01s.

這樣，包管理工具就會 在全局注冊一個名為 xiuga 的鍊接。

具體就是創建一個 xigua 軟鍊接文件，指向這個 xigua 目錄。在 macOS 中，是在 ~/.config/yarn/link/xigua 目錄下。

鍊接指向如下：

~/.config/yarn/link/xigua->/xigua-project/build/xigua

更準确來說，yarn link 是會從當前工作目錄往上找第一個有正确 package.json 文件的目錄，作為鍊接的對象，因為 npm 包裡必須要有 package.json。

接下來我們再跑到 demo-project 項目的目錄下，執行 yarn link xigua。

$yarnlinkxigua yarnlinkv1.22.17 successUsinglinkedpackagefor"xigua". ✨Donein0.01s.

它會做兩個操作：

1. 将 demo-project 下的 xigua 依賴包删除
2. 然後創建一個 xigua 軟鍊接文件，鍊接到 yarn/link/xigua。形成 demo-project -> yarn/link -> xigua-project 的鍊。

小瓜震驚了：“這操作不就和我的做法一樣嗎？不過多了一個 中間人 yarn”

是的，但 yarn 更方便。

你在 demo-project 測試完了，想要斷開鍊接，此時需要執行：

$yarnunlinkxigua yarnunlinkv1.22.17 successRemovedlinkedpackage"xigua". infoYouwillneedtorun`yarninstall--force`tore-installthepackagethatwaslinked. ✨Donein0.01s.

斷開鍊接後，因為原來的包删掉并換了個鍊接文件，所以我們需要再把這個包裝回來，需要執行 yarn install --force。

你說我删除 node_modules，然後再執行 yarn 行不行。

可以，前提是你的 node_modules 沒有其他包的鍊接，否則的話會把其他包的鍊接也幹掉。

如果要删除全局的注冊的名為 xigua 的 link，需要進入到被鍊接的目錄下，執行 yarn unlink

$yarnunlink yarnunlinkv1.22.17 successUnregistered"xigua". infoYoucannowrun`yarnunlink"xigua"`intheprojectswhereyounolongerwanttousethispackage. ✨Donein0.01s.

yarn link 的作用是幫助我們調試開發的 NPM 包。

因為普通項目的依賴包安裝是從網絡下載安裝的，如果要使用本地編譯的 NPM 包，比較好的方式是删掉依賴包，通過快捷方式來鍊接我們本地編譯包。

為了簡化這一流程，yarn link 出現了，通過中間者的形式，來實現快速地 link 和 unlink。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!