前端達人都在學習的組件協做模式 - Bit Components

做者：@楊哲迪

日常你們在平常的開發中，會積累豐富的業務組件，不管是本身造輪子也好或者基於優秀的組件庫二次封裝也好。長此以往，組件愈來愈多，管理與共享這些業務組件就可能會成爲負擔。本文要介紹的Bit就爲這種場景提供了一種新的解決思路。

Bit是什麼？

Bit利用組件使它們不只能夠在應用程序內部重用，並且提供了一個生態系統，可在應用程序之間以及跨存儲庫共享組件。

Bit是一個工具，能夠在不一樣項目 共享 與 同步 組件。

Bit簡化了UI組件上的協做過程，團隊成員能夠共享，維護和同步來自不一樣項目的隔離組件。

Bit是怎樣工做的？

本文將會從三個模塊：組件組成，組件生命週期，Bit工做流來介紹Bit和傳統的組件庫管理有哪些區別？

組件組成

每一個組件，Bit都會存儲三種元素

• 源代碼 (包括test和documentation)

• 組件的內容不只是源代碼自己，還能夠包括其餘相關文件，例如樣式文件，資產（圖像，字體），測試代碼，文檔。

• 依賴圖譜

• 將源添加到Bit組件時，Bit會分析它包含的全部依賴項（即，代碼中的import和require語句）

• 依賴圖使組件成爲獨立的，並容許在項目中移動組件而不會丟失任何引用。

• 配置項

• Compiler，bit提供編譯器 bit.envs/compilers/react@1.0.14

• Tester，bit提供的擴展，用於運行與組件關聯的測試並返回狀態。

源代碼有點相似於原來組件庫的源代碼部分，依賴圖譜相似於webpack在分析import依賴階段生成的map，而配置項就相似於webpack.config.js，Bit會幫你把組件打包編譯，因此這裏能夠看出Bit之因此可以如此方便的完成組件封裝，有一部分緣由是Bit幫咱們把組件庫打包編譯的工做作掉了。

組件生命週期

生產組件

生產組件有三個動做，track、version、export。

1. Track: 在workspace裏指定組件的構成文件。

1. Version: 標記版本會鎖定該版本下文件的內容和元數據。若是組件具備編譯器，Bit會構建組件並鎖定所構建後的組件（將其視爲相似於git commit和npm發佈同時進行）。

1. Export: export命令將爲該組件建立一個惟一ID。惟一的ID是遠程做用域名稱和本地組件名稱，遠程做用域名稱能夠包括任何名稱空間（username.collection?.namespace）。bit.dev/yangzhedi/t…

消費組件

只要上傳到遠程服務器上，該組件即可供其餘工做空間使用。使用組件的方式是經過install或import。

• Install: Bit會將組件做爲常規NPM軟件包添加到node_modules文件夾中。安裝組件時(bit install / npm install / yarn add)，該組件將添加到package.json中，指向已安裝的版本："@bit/yangzhedi.test.list": "0.0.1"。不會更改已安裝組件的代碼。

import List from '@bit/yangzhedi.test.list';

• Import: Bit會將組件添加到工做區-組件文件夾並跟蹤其修改。在導入時，您能夠看到package.json指向本地文件："@bit/yangzhedi.test.list": "file:./components/list",

• 跟蹤代碼修改，並能夠將其導出爲新版本。 彈出(eject)：若是導出了新版本，則能夠還原爲已安裝的組件。在這種狀況下，package.json將更新回"@bit/yangzhedi.test.list": "0.0.2"

Bit workflow

Ad-hoc Sharing（臨時共享）

_ | _

這種工做流適用於:

• 有幾種帶有UI組件庫的產品。

• 須要在項目之間保持一致的UI / UX。

• 沒有時間/能力來組成專門的團隊來維護組件。

帶來的好處

• 無需花費很長時間爲UI組件構建和維護共享庫，共享現有項目中已經開發的組件。

• 使用bit.dev做爲收集門戶中全部組件的發現門戶，包括demo和文檔。

• 在任何項目中均可以更改組件代碼，能夠保留使用項目中組件的本地修改，而且仍與傳入的更新合併。

• 可使用npm / yarn來安裝組件，所以它們適合項目開發人員的正常工做流程。

風險

• 規範組件的export流程

Centralized Library（中央圖書館）

這種工做流適用於:

• 須要共享UI組件的集中式存儲庫

• 一個專門的團隊來管理共享的UI組件

• 存在使用共享組件的多個項目

帶來的好處

• 對於生產者

• Bit以更高的粒度自動打包每一個組件，而不會增長維護單獨包的開銷，自動根據組件依賴關係的變化對組件進行版本控制

• 在沒有項目上下文的狀況下在本地構建組件會縮短組件在其餘項目上的調用方式上的反饋循環。

• 將組件發佈到bit.dev，使其對全部團隊可見，從而提升了組件的採用率 Bit有助於控制誰在更改組件。

• 對於消費者

• 獲取每一個項目所需的較小的分立組件對於： 減小應用程序的捆綁包大小。

• 能夠只引入他們須要的組件。 減小最終打包體積，縮短構建時間。

• 更細顆粒度的調用組件庫能夠提升項目的穩定性。

風險

• 若是有一個團隊專門來維護統一的組件庫，顆粒度太細會成爲負擔

和npm比有啥不同？

• Bit基於代碼分析使代碼打包自動化。

• Bit能夠在不離開項目上下文得狀況下，訪問到程序包 （bit import）。

• 對於生產者來講，不須要把組件單獨複製出來，就能夠直接上傳

• 對於消費者來講，想要修改組件也不須要clone組件庫，而是在項目裏就能夠直接修改

• Bit能夠在任何項目中使用組件代碼，而後直接在其中進行更改。

以上，本文主要介紹了bit cli的使用方法，bit同時也提供了一個相似於npm.org的平臺網站：bit.dev，並且還能夠在bit.dev上直接看到組件的樣式以及調用方式，連docs都不用本身寫了。

參考：

docs.bit.dev/docs/quick-…

招聘

字節跳動商業化前端團隊招人啦！能夠每日與技術網紅暢談理想、參加技術大牛交流分享、享受一日四餐、頂級極客裝備、免費健身房，與優秀的人作有挑戰的事情，這種地方哪裏找？快來加入咱們吧！

簡歷投遞郵箱：yangzhedi@bytedance.com