前端早讀課 - 【第2704期】網易嚴選多端組件庫OSSA正式開源－鑽石舞台

前言

不知道多端的需求多麼？今日前端早讀課文章由 @onlychild 投稿，由公號：嚴選技術產品團隊授權。

正文從這開始～～

經過三年的積累和迭代，網易嚴選多端組件庫 —— OSSA，正式開源啦。誠摯邀請對多端有訴求的團隊進行試用和交流，同時熱烈歡迎對開源、多端、組件庫任意之一感興趣的同學參與到 OSSA 組件庫的建設中來。

1. 背景1.1 為什麼是多端？

為了適應業務的發展，網易嚴選前端主站團隊在業務迭代過程中，先後上線了微信小程序、字節小程序以及支付寶小程序。另外還有還有其他業務線需要同時維護小程序端和 H5 端。在綜合考慮用戶體驗、開發效能之後，我們決定將一部分業務使用多端框架 Taro 進行開發（框架選型不是本文的重點，在此不詳細展開）。

1.2 為什麼自己做組件庫？

在選定 Taro 框架之後，從保證網易嚴選視覺風格統一以及提升開發體驗的角度，我們便開始尋找一款合適的基礎組件庫。在 2019 的時間節點，Taro 生態下可供選擇的組件庫還很有限。當前時間點開源的組件庫如下表所示。在調研對比之後，我們發現現有組件庫的視覺風格與網易嚴選現有風格差異較大，不符合設計部門的要求。綜合考慮之後，我們決定新建一套自己的基礎組件庫。

2. OSSA 組件庫2.1 特性

基於 Taro 開發的 UI 組件，支持 React 生態

一套組件可以在微信小程序、支付寶小程序、字節小程序、H5 多端適配運行

30+ 個高質量組件，覆蓋移動端主流場景

使用 TypeScript 編寫，提供完整的類型定義

支持按需引入

完善的自動化測試用例

2.2 架構設計

OSSA 的整體架構設計如下圖所示。

需要說明的是，我們在準備開始的時候，並沒有選擇真正的從 0 到 1。首先，Taro 官方提供了通過 Taro 創建 UI 組件庫的模版，通過該模版我們可以快速的創建組件庫。其次，我們的核心訴求是符合我們設計規範並且好用的基礎組件。所以綜合考慮，我們結合團隊內部訴求，在官方模版的基礎上改造之後進行組件庫的開發。

2.3 monorepo

目前 OSSA 包括基礎組件、demo，後續還會有官網、業務組件庫以及其他基於 Taro 的物料等。為了方便項目管理，我們採用 monorepo 的形式管理項目。提到 monorepo，首先想到的應該就是 lerna，但是 lerna 有好長一段時間都沒有在維護了（最近又開始有 commit 了），在調研了一些開源項目之後，我們決定使用 pnpm workspace 來進行 monorepo 的管理。

2.4 編譯 / 打包

OSSA 在編譯打包這一塊，目前是使用的官網組件庫模版提供的能力。目前會通過 rollup 編譯輸出 cjs 和 esm 兩種格式的文件，另外也會通過 tsc 直接編譯一份組件代碼進行輸出。在使用時，我們發現目前的 esm 格式的包，在 Taro 項目中編譯時，組件庫並沒有被 tree shaking，這意味着，雖然輸出了 esm 的包，但是我們的組件庫還是不支持開箱即用的按需引入，在嘗試過在 rollup 編譯階段進行各種優化之後，我們覺得應該是組件的一些寫法具有副作用，導致 tree shaking 失敗。我們將在後續對組件庫的迭代中進行更新。

為了支持按需引入，我們暫時推薦在 Taro 項目中使用 bebel 插件 babel-plugin-import 進行處理。需要在 babel.config.js 中添加如下配置：

2.5 部署 / 發包

由於 pnpm 目前還沒有 lerna 一樣完善的發包功能，官方推薦搭配 changesets 共同使用。通過 changeset 也可以實現交互式的發包流程。通過配置 Github actions 就可以做到自動觸發發布流程。

2.6 規範

為了組件庫的長遠健康發展，在確定開發組件庫的初期，我們便成立了組件評審委員會，並制定了組件新增的流程及規範，新增組件的流程如下圖所示。從圖中可以看出，在確認了需要新增一個組件之後，首先需要委員會的設計同學進行交互及視覺的設計。在視覺和交互通過評審之後，才會進入正式的開發，開發完成之後還需要各方的驗證及走查才能正式入庫。