組件是現代應用程序開發的推動力。除了用作塑造用戶體驗的 UI 元素外，組件還能充當可複用的模塊化代碼單元，這類單元通常會用在多個項目中。當你開始爲你的組織構建一套共享組件架構時，你肯定需要弄清楚一些棘手的問題，例如，如何獨立開發組件，同時避免存儲庫過多；如何針對每個組件處理好控制版本、發佈和管理工作；如何幫助他人發現並應用這些組件，等等。這些都是層次較深的問題，範圍涉及組件開發的單倉庫經驗，到多組件的跨存儲庫管理，等等。本文將介紹如何跨多個項目利用合適的工具和工作流來開發、分發和應用組件，爲各位提供一份基於組件構建、分發和協作，以構建複數項目和應用程序的實用指南。
框架 / 無框架
關於這個話題，你基本上有兩個選擇。要麼是使用像 React、Angular 或 Vue 這樣的框架，好處是你可以享受成熟框架的所有現成結構和優勢。要麼還可以選擇 Web 組件及其工具鏈（如 Stencil 等），好處是這些組件與框架無關，更容易在基於不同框架的項目中複用和利用組件。
多存儲庫也有 Monorepo 體驗？
你必須搞清楚哪種架構更適合你。爲了避免每開發一個組件都放到一個單獨的存儲庫中的開銷，許多團隊選擇將多個組件分組到許多組件庫中。
像 Bit 這樣的工具可以使你完全隔離地開發、構建和測試庫中的各個組件。使用 Bit 時，你可以將任何存儲庫（和庫）中的每一個組件作爲獨立單元來跟蹤，並自動將其與所有依賴項打包在一起。然後這些組件可以獨立鏈接到一個編譯器（需要零配置），然後就可以獨立構建、測試和渲染。接下來你可以通過存儲庫對多個組件進行版本控制和發佈。更新單個組件時，Bit“知道”其他哪些組件依賴於該組件，並幫助你更新受該組件更新影響的所有組件。它還提供了額外的，非常利於代碼共享的“類 monorepo”功能，例如自動本地鏈接、多組件配置控制、子集和增量構建、循環依賴項處理、動態工作區和單個 NPM 安裝，等等。
另一個選擇是將所有項目重構爲一個 monorepo，但這是一項巨大的工程，需要做的工作遠不止共享代碼而已。你還可以使用其他輔助工具（例如 Lerna）從存儲庫中對組件進行版本控制和發佈，但是大多數工具都需要大量的重構和配置，並且無法控制組件的依賴關係圖。
跨存儲庫的分發和使用
組件發佈後工作還遠沒有結束。你必須確保人們可以在實際工作中找到、使用和更新這些組件。否則，你的所有這些心血就可能徹底白費了。大多數人不會費那麼大的勁尋找你的組件，也不會使用需要修改時卻沒法調整的組件。只爲了一個組件就得一頭扎進整個庫並更新它，會是非常繁瑣笨拙的流程。
設置共享組件門戶，然後好好裝扮一下！
爲了讓大家都可以使用你的共享組件，並簡化組件的發現和使用流程，你可以創建自己的組件門戶，也可以使用基於雲的門戶（例如 bit.dev）。
這樣的門戶應該提供的關鍵要素包括：- 查找你的團隊共享出來的組件。
- 瞭解它們的 API 並運行實時渲染的示例。
- 獲取單個組件以在不同項目中使用。
- 理想情況下，爲每個組件運行構建和測試。
如果你決定自行構建也是可以的，只是可能要多花一些時間。如果你選擇 bit.dev，則上述這些功能都是現成可用的，此外還有管理權限和控制工作流等功能。它將託管你的組件，運行其 CI，讓你保存並運行渲染的代碼示例，提取組件的 API 文檔，然後使用 npm/yarn 安裝它們。
實現單個或批量組件更新，無需處理整個庫
你可以利用 Bit 進行版本控制，並從存儲庫發佈單個組件，甚至可以批量發佈多個組件。
當你更改某個組件時，Bit 可以讓你在存儲庫中只更新這個組件本身以及依賴它的其他組件，這樣你就不用處理整個庫了。這樣一來，這些組件的使用者就可以僅針對其安裝的組件（及其依賴組件）獲取更新，而不必爲整個庫引入多餘的更新。
從使用的任何存儲庫中啓用組件修改和更新
當你將組件發佈到 bit.dev 時，你不僅可以將它們安裝爲軟件包，還可以做更多事情。你可以將組件的實際源代碼 bit import 到正在使用的任何存儲庫中。無需上下文切換，你也不必回到發佈庫來建議你的更改。
該組件的“克隆”版本隨附所有相關文件和依賴項，以及鏈接的編譯器，並由 Bit 進行版本控制和管理。於是你可以只編輯代碼並單獨運行構建和測試。
當你對結果感到滿意時，只需 bit tag 一個新版本，然後將其導出回 bit.dev。接下來這些更改就可以更新到其他任何項目中，包括原始的發佈庫上，可以使用存儲庫中的 Git 合併更改，這樣就可以輕鬆地在所有位置同步組件更改。
爲開發人員提供的組件設計系統
在構建和共享組件時，實際上你是在構建一個 UI 組件設計系統。這個系統可以標準化你的開發工作，併爲你的應用程序用戶塑造一致且舒適的視覺和功能體驗。
你要構建的不只是一個庫，而是在組織內部創建一個富有生命力的組件生態系統。你將獲得的不只是一個靜態的文檔站點，而是一個帶有可視化渲染組件的組件中心，其中所有人都可以輕鬆找到、查看並使用你構建的組件。
具有實際代碼組件的可視化設計系統
通過 bit.dev，你可以渲染和可視化實際的代碼組件（React、Vue 和 Angular），幫助開發人員和設計人員準確瞭解他們的組件對用戶展示的外觀、行爲和體驗。他們甚至可以隨時在可編輯的演示臺上運行這些組件。
在這裏，開發人員可以輕鬆找到並安裝所需的組件，他們和設計人員還可以看到組件的可視化效果。當開發人員作出更改並更新特定組件的版本時，設計人員可以立即查看新版本並監視更改，以確保生成的組件適合他們的設計系統。
開發人員可以根據需要靈活地對組件作出更改，並通過自己的項目提交更新建議，同時設計人員可以隨時加入協作以審查更改，這就形成了良好的平衡。
組件庫設計系統工作流程
使用 Bit 時，你可以在庫中單獨構建、打包和發佈組件。然後你可以將它們導出到 bit.dev，從而打造一套由實際的源代碼組件組成的可視化設計系統。
來自 bit.dev 設計系統的組件可以安裝在其他項目中，或導入到項目中以作出更改，然後通過 bit.dev 同步回庫。這一工作流程有幾大優點：
- 模塊化組件開發：將組件及其所有依賴項自動封裝在存儲庫中，然後鏈接一個帶有零配置的編譯器，你就可以輕鬆地在倉庫中構建、測試和更新組件及其依賴項，同時不影響其他部分。接着你可以批量發佈組件，每個組件都發布爲獨立的包。
- 簡化組件的發現和使用過程：將組件整合到一個門戶中，方便大家發現和使用它們。跨項目輕鬆更新和控制更改。
- 改善組件的使用率和協作環境：讓你自己和團隊的夥伴們直接在自己的項目中對組件提出更改建議，無需上下文切換即可在複雜的庫中作出 PR。提高組件的採用率和使用率，減少複製粘貼，改善 UI 標準化及跨應用程序和屏幕的一致性。
總結
在多個項目和存儲庫之間複用組件，可以在項目和團隊成員之間創建高效的組件經濟環境。無論你在使用庫，還是要直接在項目之間共享組件，有三條原則是不變的：將組件開發爲可複用單元；分發它們以便大家查找和使用；讓自己和其他人採用這些組件並協同作出更改。
請隨時查看 Bit 的 GitHub 鏈接，歡迎提出任何問題、評論或反饋。祝大家組件開發工作順利！🐥
Bit：https://github.com/teambit/bit
原文鏈接：
https://itnext.io/how-to-easily-reuse-components-across-projects-and-repositories-fa73f8ba2a83