有時(shí)候我們需要修改 node_modules 下的一些代碼，但是 node_modules 不會(huì)提交到 git 倉(cāng)庫(kù)，改動(dòng)保存不下來(lái)，怎么辦呢？

這時(shí)候可以用 patch-package 這個(gè)工具。

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

加了一個(gè) a.js 的文件：

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

在 patches 目錄下的 xx.patch 文件里記錄著對(duì)這個(gè)包的改動(dòng)。

這個(gè) patches 目錄是可以提交到 git 倉(cāng)庫(kù)的，然后再次把項(xiàng)目拉下來(lái)的時(shí)候，執(zhí)行下 npx patch-package 就會(huì)應(yīng)用這次改動(dòng)。

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

這樣能保證每次拉取下來(lái)的代碼都包含了對(duì) node_modules 的改動(dòng)。

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

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

patches 文件怎么生成的

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

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

首先 patch-package 會(huì)創(chuàng)建一個(gè)臨時(shí)目錄：

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

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

確實(shí)，是有這樣一個(gè) package.json 的。

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

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

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

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

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

然后寫到 patches 目錄即可

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

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

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

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

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

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

沒錯(cuò)，patch-package 也是這樣實(shí)現(xiàn)的，不過(guò)是自動(dòng)進(jìn)行的：

它讀取 patches 文件之后會(huì)進(jìn)行 parse：

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

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

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

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

總結(jié)

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

實(shí)現(xiàn)原理要分為兩部分來(lái)看：

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

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

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