背景

我們常常會(huì)遇到一個(gè)問(wèn)題，網(wǎng)上現(xiàn)有的開(kāi)源插件并不能滿足我們實(shí)際項(xiàng)目的預(yù)期。但如果只需要對(duì)源碼進(jìn)行小小的改動(dòng)就能滿足我們的需求，那改源碼一定是首選

前言

修改別人的源碼往往有這幾個(gè)方式：

1. 直接在項(xiàng)目的node_modules下找到插件的源碼直接修改；

• 優(yōu)點(diǎn)：簡(jiǎn)單直接、快速見(jiàn)效
• 缺點(diǎn)：不能持久化，一旦重新安裝就失效；不方便團(tuán)隊(duì)成員使用修改后的代碼

3. 去github上fork代碼到自己的倉(cāng)庫(kù)進(jìn)行修改，并將自己修改過(guò)后的代碼發(fā)布到npm上使用；

• 優(yōu)點(diǎn)：團(tuán)隊(duì)成員都可以使用到這份修改的代碼
• 缺點(diǎn)：麻煩、十分麻煩

顯而易見(jiàn)，上面這兩種方法既不優(yōu)雅，也不可靠。作為程序員的我們豈能被這事兒給難住，開(kāi)源社區(qū)早已給我們準(zhǔn)備好了解決方案：patch-package^[1]

使用補(bǔ)丁

通過(guò)cra開(kāi)啟一個(gè)項(xiàng)目

npx create-react-app my-app
cd my-app
npm start

給項(xiàng)目@alifd/next（ui庫(kù)）、patch-package、postinstall-postinstall（使用yarn安裝時(shí)需要安裝，npm無(wú)需安裝此依賴）

yarn add @alifd/next patch-package postinstall-postinstall -D

給 package.json文件中添加腳本命令（非常重要，無(wú)論我們使用yarn還是npm，在整體安裝結(jié)束后都會(huì)自動(dòng)執(zhí)行該命令，對(duì)node_modules中的包打補(bǔ)丁）

"scripts": {
+  "postinstall": "patch-package"
 }

我們引入組件button，并查看組件當(dāng)前結(jié)構(gòu)

圖片

我們?nèi)ode_module中修改button源碼

圖片

我們?cè)诳纯错?yè)面情況（如果沒(méi)有效果的話，可以重啟一下服務(wù) ）

圖片

<figcaption mp-original-font-size="14" mp-original-line-height="22.399999618530273" style="margin: 5px 0px 0px; padding: 0px; outline: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; text-align: center; color: rgb(221, 165, 45); font-size: 14px; line-height: 22.399999618530273px;">result.png</figcaption>

修改完并且也生效了，我們就要開(kāi)始打補(bǔ)丁了，運(yùn)行命令yarn patch-package package-name

yarn patch-package @alifd/next

成功后你會(huì)看到根目錄多了一個(gè)patches文件夾，里面包含了你修改的npm包的patch文件。點(diǎn)開(kāi)可以很清楚的看到你都做了哪些修改。文件名中的1.22.21就是依賴包的版本號(hào)，表示這個(gè)補(bǔ)丁只對(duì)1.22.21版本的插件生效

圖片

測(cè)試

刪除node_module并重新安裝

rm -rf node_modules/ && yarn

依賴包安裝完成后可以在命令行中看到補(bǔ)丁被應(yīng)用（倒數(shù)后5行）

[1/4]   Resolving packages...
[2/4]   Fetching packages...
[3/4]   Linking dependencies...
warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @alifd/next@1.22.21" has unmet peer dependency "@alifd/meet-react@^2.0.0".
warning " > @alifd/next@1.22.21" has unmet peer dependency "moment@^2.22.1".
warning " > @alifd/next@1.22.21" has incorrect peer dependency "react@^16.0.0".
warning " > @alifd/next@1.22.21" has incorrect peer dependency "react-dom@^16.0.0".
[4/4]   Building fresh packages...
$ patch-package
patch-package 6.4.7
Applying patches...
@alifd/next@1.22.21 ?
?  Done in 20.10s.

yarn start重新啟動(dòng)，查看審查元素，依舊是a標(biāo)簽！