有時候我們需要修改 node_modules 下的一些代碼，但是 node_modules 不會提交到 git 倉庫，改動保存不下來，怎么辦呢？

這時候可以用 patch-package 這個工具。

比如我對 node_modules 下的 acorn 代碼做了一些修改：

加了一個 a.js 的文件：

在項目目錄下執(zhí)行 npx patch-package acorn 之后，就會生成這樣一個目錄：

在 patches 目錄下的 xx.patch 文件里記錄著對這個包的改動。

這個 patches 目錄是可以提交到 git 倉庫的，然后再次把項目拉下來的時候，執(zhí)行下 npx patch-package 就會應(yīng)用這次改動。

可以把它配到 postintsll 里，每次安裝完依賴自動跑。

這樣能保證每次拉取下來的代碼都包含了對 node_modules 的改動。

如何使用我們學(xué)會了，那它是怎么實現(xiàn)的呢？

探究它的實現(xiàn)原理要分為兩各方面，一個是 patches 文件怎么生成的，一個是 patches 文件怎么被應(yīng)用的。

patches 文件怎么生成的

看 patches 文件的內(nèi)容就能看出來這是 git 的 diff：

確實，patch-package 就是依賴 git diff 實現(xiàn)的 patches 文件生成。

首先 patch-package 會創(chuàng)建一個臨時目錄：

然后在這個目錄寫入一個 package.json 文件，dependencies 就是命令行參數(shù)指定的包名：

我們?nèi)ミ@個目錄看一下：

確實，是有這樣一個 package.json 的。

然后它會在這個目錄下執(zhí)行 yarn install 或者 npm install（patch-package 現(xiàn)在不支持 pnpm）：

之后就進行 git 的 init、add、commit，生成一個基礎(chǔ)的 commit。

然后把現(xiàn)在 node_modules 目錄下的這個被修改過的包復(fù)制過去：

之后再 git add，然后執(zhí)行 git diff，就能拿到改動的 diff：

這不就是 patches 文件的內(nèi)容么：

然后寫到 patches 目錄即可

patches 文件的生成還是挺簡單的，就是在臨時目錄下創(chuàng)建了一個基礎(chǔ) commit，然后把新的內(nèi)容復(fù)制過去，通過 git diff 生成的 patches 內(nèi)容。

那應(yīng)用 patches 的內(nèi)容是怎么實現(xiàn)的呢？

patches 如何被應(yīng)用的？

我又對 acorn 目錄下的文件做了些修改，生成的 patches 文件是包含了增刪改的：

patches 文件里記錄了對哪幾行做了新增，哪幾行做了刪除，哪幾行做了修改。

如果人工應(yīng)用這個 patches 文件的話，不就是找到對應(yīng)文件的對應(yīng)行數(shù)，做反向的操作就可以了么？

沒錯，patch-package 也是這樣實現(xiàn)的，不過是自動進行的：

它讀取 patches 文件之后會進行 parse：

這個 parse 的實現(xiàn)就是對每一行的字符串做判斷，進行不同的處理：

最終能得到一個包含 diff 信息的對象，包含了對什么文件的哪些行做了什么修改：

之后對不同的類型做不同的操作就可以了：

這樣就把 patches 文件里的改動應(yīng)用到了 node_modules 下的包里。

總結(jié)

當(dāng)我們需要對 node_modules 下的代碼做改動的時候，可以通過 patch-package xxx 生成 patches 文件，它可以被提交到 git 倉庫，然后再拉下來的代碼就可以通過 patch-package 來應(yīng)用改動。

實現(xiàn)原理要分為兩部分來看：

patches 文件的生成是在臨時目錄生成 package.json，下載依賴，生成一個 commit，然后把改動的代碼復(fù)制過去，兩者做 gif diff，就可以生成 patches 文件。

patches 文件的應(yīng)用則是 patch-package 自己實現(xiàn)了它的 parse，拿到對什么文件的哪些行做什么修改的信息，之后根據(jù)不同做類型做不同的文件操作就可以了。

整體看下來，這個小工具的原理還是挺清晰的，不過 parse patch 文件那部分還是有些麻煩的，當(dāng)你需要解析 git diff 信息的時候，也可以參考下它的實現(xiàn)。