打造react企業私有化組件庫

介紹

隨着web框架不斷完善和壯大，愈來愈多的前端團隊開始搭建內部的組件庫，雖然市場上已經有不少功能強大且完善的UI組件庫提供給咱們使用，例如，react 開源的就有 antd, material。 vue開源組件庫有 element UI、 iView 等等。用這些框架能夠快速的開發一個B端的產品，可是面對日益變化的用戶需求，和一些定製化的交互場景，咱們可能須要對已有組件進行二次開發，或者是基於原有組件的升級和進行一些定製化的功能開發。對於一些C端用戶最求更爲差別化的UI設計效果和高效的交互體驗更須要企業本身內部共享的組件庫。

如何從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,
}
複製代碼

文檔地址 github.com/umijs/fathe…

組件上傳

在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