如何給開源項目提過 PR 呢？其實很簡單

大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以加我微信?ruochuan12
源碼共讀群里有小伙伴聊到如何給開源項目提PR，所以今天分享這篇文章。

你有給開源的庫或者框架提過 PR 嗎？

如果沒有，那么今天的文章會教你怎么給開源庫提 PR。

為什么要給開源項目提 PR？

這件事還得從好幾年前（2019年）說起，那時候在折騰一個虛擬 DOM 的玩具（參考之前的文章：🔗虛擬DOM到底是什么？

在構建工具上我選擇了 Rollup，希望每次構建的時候都能自動進行代碼的 Lint，所以引入了 Rollup 的一個插件：rollup-plugin-eslint。

在使用這個插件的過程中，發現和 Webpack 對應的插件 ?eslint-webpack-plugin 還是有一些差距的。我在使用 Webpack 的 eslint-webpack-plugin 時候，只需要配置 fix 屬性，就能夠在保存代碼的時候，自動對代碼進行 fix。

//?webpack.config.js
const?ESLintPlugin?=?require('eslint-webpack-plugin');module.exports?=?{//?...plugins:?[new?ESLintPlugin({fix:?true,extensions:?['js',?'jsx']})
};

而在使用 rollup-plugin-eslint 的時候，看文檔上，好像沒有提到這個選項，也就是說 rollup-plugin-eslint 根本不支持這個功能。然后，搜索了一下 Issues，不搜不要緊，一搜嚇一跳，發現有人在 2016 年就提出了這個疑問😳。

作者的回復也很簡單，歡迎提交 PR。

我當時心想，這個功能這么久了都沒人實現想必很難吧。但是隔壁的 eslint-webpack-plugin 明明支持這個功能，我去看看它怎么實現的不就行了🐶。

于是，我就把 eslint-webpack-plugin 的代碼 clone 下來一頓搜索，發現它實現這個功能就用了三行代碼。

if?(options.fix)?{await?ESLint.outputFixes(results);
}

激動的心，顫抖的手，我趕忙就去 ?rollup-plugin-eslint 那里提了個 PR。

🔗PR: https://github.com/TrySound/rollup-plugin-eslint/pull/27

關鍵是，作者都沒想到這個東西居然這么簡單就實現了。

如何在 GitHub 上提 PR？

上面是我第一次提 PR 的一個心路歷程，如果你也發現了你現在使用的什么開源框架有待優化的地方，這里再教大家怎么在 GitHub 上提交一個 PR。

對開源項目進行 Fork

首先把你要提交 PR 的項目 Fork 到自己的倉庫。

然后到自己的倉庫中，將 Fork 的項目 clone 到本地。

$?git?clone?git@github.com:Shenfq/rollup-plugin-eslint.git

切換到新分支，提交變更，推送到遠程

代碼 clone 到本地之后，先切換一個新的分支，分支名最好緊貼這次更新的內容。

$?git?checkout?-b?feature/add-fix-option

在新分支修改代碼：

+??if?(options.fix?&&?report)?{
+????CLIEngine.outputFixes(report);
+??}

提交變更：

$?git?add?.
$?git?commit?-m?"feat:?add?options.fix"

最后將新的分支推送到遠程：

$?git?push?--set-upstream?origin?feature/add-fix-option

新建 PR

在自己的 GitHub 倉庫中找到對應項目，打開 Pull requests Tab，點擊 New pull request 按鈕，新建一個 PR。

然后，在下面的界面中，選擇剛剛提交的分支，最后點擊 Create pull request 即可。

點擊之后，就在對應的項目中提交了一個屬于你的 PR 了。如果順利的話，你就能『混』到一個開源項目貢獻者的頭銜。

- END -

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信江西?拉你進群。