介紹
如何從0開始搭建元件庫
要開發一個元件庫首先我們要知道的是一個元件庫包含哪些部分，參考國內的antd，element UI等UI元件框架基礎部分都包含以下幾個部分
- 元件原始碼（Components）
- 元件文件工具（Doc）
- 測試（Test)
- 打包構建（Build）
元件原始碼（Components）
元件的原始碼，也是元件庫的核心。這裡我們以antd為例，耦合度非常的低，元件與元件之間沒有太多的依賴關係，也便於整體專案的維護。antd原始碼是採用ts進行編寫，對元件props引數進行了嚴格的規範，便於使用者閱讀，也便於開發者的維護。
index.tsx 部分檔案程式碼，所有元件將通過index.tsx彙集到一起進行匯出打包。
export { default as Affix } from './affix';
export { default as Anchor } from './anchor';
export { default as AutoComplete } from './auto-complete';
export { default as Alert } from './alert';
複製程式碼這部分的難點在如何編寫出精緻且能用於多種場景的元件，雖然沒有複雜的業務邏輯，但是要多方面考慮使用者的體驗。
元件使用文件工具（Doc）
元件編寫好之後少不了的是對元件使用方式的描述，包括基本的描述、程式碼演示、API、注意事項。 這裡簡單介紹幾款工具以及我們要使用的是哪款(現在前端生態真的是很豐富，能解決大部分的開發問題，以及你想要的工具)
| 名稱 | 描述 | 上手程度 | 地址 | star |
|---|---|---|---|---|
| bisheng | antd使用 | ⭐️ | www.npmjs.com/package/bis… | 2.3k |
| docz | 排行老二 | ⭐️⭐️⭐️ | www.npmjs.com/package/doc… | 18.1k |
| Storybook | 功能齊全，提供很多使用外掛 | ⭐️⭐️ | www.npmjs.com/package/doc… | 46.2k |
| dumi | umi生態 螞蟻金服 sorrycc 主導開發 | ⭐️⭐️⭐️⭐️⭐️ | github.com/umijs/dumi | 213 |
我們這裡採用的dumi工具，非常容易上手，中文文件齊全，支援 mdx 寫法，能直接在 md 中編寫 react 元件進行渲染。 而且是umi生態後勁十足，因為是3月2號才釋出正式版所以star有點少，但是相信在螞蟻金服作為爸爸的情況下還是能夠發展的不錯的。介面效果和antd也是極為相似。
// 建立元件開發的目錄
$ mkdir library && cd library
// 安裝 dumi
$ npm i dumi
// 建立文件
$ mkdir docs && echo '# Hello dumi!' > docs/index.md
// 預覽文件
$ dumi dev
複製程式碼測試（Test)
為了保證專案的穩定自動化測試起到一個非常關鍵的作用，react自動化測試要使用到的工具為
- jest
- enzyme
Jest是一個JavaScript測試框架，旨在確保任意JavaScript程式碼的正確性。 它允許你用可訪問的、熟悉的和功能豐富的 API 來寫測試，讓你快速獲得結果。 enzyme 有點類似jquery，通過操作dom獲取檢視上真實存在的值。可能兩句話還不能給大家直觀的感受，上程式碼 。
每一個describe都是一個測試用例，
每一個it都是一個執行函式如果不能通過expect的檢查那麼將會被進行統計丟擲測試異常。
import {shallow} from 'enzyme';
describe('Enzyme Shallow', function () {
it('App\'s title should be Todos', function () {
let app = shallow(<App/>);
expect(app.find('h1').text()).to.equal('Todos');
});
};
複製程式碼文件地址： d.umijs.org/
打包
打包我們這裡採用的 umi-father,也是屬於umi生態，只需要簡潔的配置就可以打包出任意你需要的格式， 這裡給大家簡單介紹幾種打包格式：
- esm -> 瀏覽器環境
- cjs -> nodejs環境（測試|ssr）
- umd -> 通過瀏覽器script引入的方式
安裝
yarn add father
複製程式碼打包
father build
複製程式碼新建 .fatherrc.js 檔案進行配置打包的時候會自動識別這個配置檔案然後進行打包處理
export default {
extractCSS: true,
esm: {
type: 'rollup'
},
cjs: 'rollup',
extraBabelPlugins: [
['import', { libraryName: 'tts', libraryDirectory: 'es', style: true }],
],
entry: '/components/index.ts',
lessInBabelMode: true,
}
複製程式碼元件上傳
在npm上我們可以上傳自己的元件，首先你得需要一個npm賬號，註冊好這個賬號之後，在本地通過命令列npm login來進行登入, 然後通過npm publish來進行上傳，但是這裡要特別注意的是通過package.json檔案來做一些配置。
- name: 配置包的名稱
- version: 版本號
- main: 包主入口
- files： 你要上傳那些檔案件
企業私有元件庫
為了保護自己企業內部的一些庫的安全性，和私密性，可以選擇兩種方案，一種是購買npm的付費服務，就好像github的付費服務一樣的你可以自定義自己私有的庫，還有一種就是搭建自己私有的npm庫，那麼大家肯定會問怎麼獲取公有的npm包呢，這裡有個verdaccio工具幫我解決了這個問題，它的核心原理是修改npm遠端獲取包的連結，那麼在npm install 的過程中，他會先獲取 verdaccio 上面我們掛載的包，如果 verdaccio 包管理工具沒有，那麼他就會去獲取 npm 上面的包，就解決了這個問題。 安裝
npm install -g verdaccio
複製程式碼啟動
$> verdaccio
warn --- config file - /home/.config/verdaccio/config.yaml
warn --- http address - http://localhost:4873/ - verdaccio/3.0.0
複製程式碼你可以通過以下命令來設定npm從哪個源下載
npm set registry http://localhost:4873/
複製程式碼你也可以在下載的時候帶上引數
npm install --registry http://localhost:4873
複製程式碼當我們去下載npm包的時候就會去自己的包管理服務去下載了 文件地址： verdaccio.org/
元件庫示例
- npm地址：www.npmjs.com/package/rea…
這個包實現了一個react Button 元件，其他元件還需要完善 - 原始碼地址：後續開放到github
- api文件地址： 需要一臺雲服務部署一下
總結
其實開發一個私有的ui元件庫並不難，難就難在需要大量的前端知識做支撐，不是需要知識面有多深而是知識面要很廣，react、js、ts、less、webpack、npm 包管理、jest、enzyme、babel、等等，深度的問題是留在我們具體寫某些元件需要思考的。本文的也是給大家提供一些思路，具體的描述也不是最全面的，還有很多內容是可以擴充套件的，大家可以相互探討學習。 微信公眾號二維碼.jpg