UI元件庫-背景
tnpm：http://tnpm.oa.com/package/@tencent/kg-ui 文檔：http://kgui.pages.oa.com/
為什麼要開發元件庫呢？
- 從業務角度：快速的業務疊代，元件有較多重複開發 //共性的地方應該複用
- 從設計角度：體驗不一緻；// 産品遵循一定規範性，保持産品一緻性
- 從開發效率角度：效率低; // 需要快速響應業務開發
- 從可維護性角度：可維護性差；// 需要統一代碼管理，不希望到處複制粘貼
UI元件庫目标
- 支援hippy/h5
- 低耦合可擴充
- 項目快速接入
- 版本管理
- 文檔清晰
- 支援換膚
元件庫整體架構
整體架構
元件設計-高内聚低耦合
元件設計是有一些方法論可以遵循，如内聚性和耦合性，内聚性就是元件封裝的粒度，它主要是讓元件整體穩定一些。
設計原則
- 單一原則
單一原則: 每個元件僅提供一個功能。
單一職責的元件的好處很明顯，可以最大可能性地複用元件，但是這也帶來一個問題 , 過度單一也可能會導緻過度抽象,造成元件庫的碎片化；比如在實作小紅點，小紅點基本上是結合文字和圖檔展示，如果我們單獨把小紅點提出來，會導緻過于碎片化。
單一職責元件要建立在可複用的基礎上，對于不可複用的單一職責元件我們僅作為獨立元件的内部元件即可。
- 穩定性原則
比如我們有三個元件A、B、C，A不依賴于任何元件，X、Y、Z依賴于A。B不依賴于任何元件，M依賴于B，C是依賴于N，這個穩定性原則，最終的結果是：A>B>C；
image
原因是在實際情況中，如果你要給X、Y、Z增加一個功能，首先你可能不會改A的代碼，因為這麼多人用了A，改挂了怎麼辦？隻有H依賴B，相對來說，你有可能修改B。這種情況下，A是相對更穩定的。也就是說，我們在依賴時，盡量去依賴很穩定的元件；
基于以上二點，我們設計和規劃我們元件庫的構成
image
元件是由一些基本的元素組成，文字、顔色、和圖形等，通過這些基本的元素進行不同的組合，進而創造出統一且層次豐富的設計系統。
元件通用性
元件設計盡量靈活，除了豐富props，還支援使用者自定義完成個性化定制需求。
我們在元件封裝過程中發現，單純的props和方法是無法完全滿足使用者個性化需求的；
為此，我們制定靜态成員變量給到使用者去自定義排列組合；
比如Modal彈層的實作：
image
const { ModalContent, ModalDesc, ModalLink, ModalAction, ModalFeed } = Modal;
<Modal
isShow
imageUrl="https://y.gtimg.cn/music/common/upload/t_cm3_photo_publish/1830565.jpg"
title="标題"
closeType="white"
confirmText="确認"
btnType="primary"
>
<ModalContent>
<ModalLink>這是個連結</ModalLink>
<ModalDesc>這裡是句補充說明的輔助文案。</ModalDesc>
<ModalFeed
imageUrl="https://y.gtimg.cn/music/common/upload/t_k_guild_comeptition_join_list/1799661.png"
title="主文案"
desc="輔助文案"
/>
</ModalContent>
</Modal> 複制
總結：通用性設計其實是一定意義上放棄對 DOM 的掌控， 将 DOM 結構的決定權轉移給開發者。元件隻負責行為和最基本的 DOM 結構；
元件工程化
- 本地調試：支援web，hippy調試
- 元件依賴更新問題：接入多包管理lerna
一鍵安裝依賴：很多子產品都會依賴babel、eslint等子產品，這些大多都是可以共用的， 我們可以通過lerna link convert指令，将它們自動放到根目錄的package.json檔案中去。 複制
通過lerna bootstrap 指令安裝依賴并将代碼庫進行npm link。
自動更新依賴：根據 git 資訊，檢查産生修改的元件；更新有過修改的元件的版本号，同時更新引用方元件的版本号； 複制
支援獨立版本管理 複制
-
代碼規範：
接入@tencent/kg-lint
提供git hook: husky 複制
支援eslint（代碼規範） + prettier（風格統一） + commitlint （送出規範）+ 團隊預設config 代碼規範eslint 複制
送出規範commitlint 複制
風格prettier 複制
自動适配本地和CI環境，一鍵執行 複制
- 代碼品質：
接入TS：類型檢查，代碼提示，自動補全；減少更小的BUG
接入Jest：支援 DOM API， 斷言庫，快照， 覆寫率， 生成報告；collectCoverage 生成測試報告；
`
- 元件工程化-版本管理
image
目前我們支援了二種方式發包；
一種是合入master，自動發包；merge_requests 觸發 Orange CI，檢查編譯是否通過;目标分支被合入 master 後，master 分支觸發 Orange CI push hooks，釋出版本;
版本号生産遵循conventionalcommits;
根據 git 資訊，檢查産生修改的元件；
更新有過修改的元件的版本号，同時更新引用方元件的版本号；
将 package.json 修改送出 git, 并以該版本号作為 commit 資訊；
将所有有修改的元件釋出至 npm 釋出完成
fix: 類型 為 fix 的送出表示在代碼庫中修複了一個 bug，修改小版本号。
feat: 類型 為 feat 的送出表示在代碼庫中新增了一個功能，修改次版本号。
一種是分支釋出，手動打beta版本； 分支釋出不推薦；業務代碼必須使用正式版本号的 package；使用commit-hash，可以有效避免沖突；
文檔建設
image
react-styleguidist是基于JSDOC的一個可以幫助react項目快速建構項目文檔的一個插件。 styleguide會預設為src/components/*/.js的js檔案生成文檔，styleguide讀取了注解、元件Props 我們生成了元件文檔，并且将propTypes的注解放到description中
元件擴充
es子產品規範輸出；es子產品import 和 export 是确定的；
借鑒 antd 接入babel-plugin-import 預設支援基于 ES module 的 tree shaking，
- k歌項目接入babel-plugin-importimport { Modal } from “@tencent/kg-ui”;
- 手動引入（不使用以下插件也會有按需加載的效果）import Modal from "@tencent/kg-ui/lib/components/Modal/index";
成功展示
目前已經在全民k歌和輕緣APP全面接入
image
歡迎體驗：
tnpm：http://tnpm.oa.com/package/@tencent/kg-ui
文檔：http://kgui.pages.oa.com/