【第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 规范
为了组件库的长远健康发展，在确定开发组件库的初期，我们便成立了组件评审委员会，并制定了组件新增的流程及规范，新增组件的流程如下图所示。从图中可以看出，在确认了需要新增一个组件之后，首先需要委员会的设计同学进行交互及视觉的设计。在视觉和交互通过评审之后，才会进入正式的开发，开发完成之后还需要各方的验证及走查才能正式入库。
在组件开发层面，除了通过 eslint、stylelint 来保证编码风格统一，另外还制定了详细的命名及样式书写规范。为了保证质量，目前组件库的 demo 使用 cypress 进行了完善的 e2e 测试。
2.7 组件
目前 OSSA 开源的仅包含基础组件库部分，我们对基础组件按照基础、输入、输出、反馈以及导航这几类进行了划分。具体组件不在此一一列举，具体大家可以扫描 DEMO 二维码进行体验：
除了基础组件，我们在业务开发过程中，特别是在电商领域也积累了一些业务组件。此外网易严选前端团队在其他业务上的实践也积累了一些基于 Taro 的多端物料，我们将在后续完善之后，一并开源，敬请大家期待。
3. 后续规划
OSSA 组件库后续将重点在以下几个方面进行迭代，希望对多端以及对 OSSA 感兴趣的同学可以一块参与 OSSA 的建设。
更加完善的组件测试用例。作为可持续高质量迭代的 OSSA 组件库，目前已针对 H5 端全覆盖 E2E 用例，我们将持续性的丰富我们的用例集和用例质量，以保证 OSSA 高质量发展。我们将在之后的迭代中完善 OSSA 全端的测试用例。
扩充基础组件库。目前 OSSA 已有 30 + 组件，虽然已经能够满足日常开发的诉求，但是还是有些场景没有覆盖到，后续我们将在完善现有基础组件的基础上，对基础组件库进行扩充。
开源业务组件库及物料。我们在多端上踩了很多坑，总结了一些经验，也沉淀了一些业务相关的组件和物料，为了让大家少踩坑，也为了反哺社区，我们后续会将业务组件和物料也逐步开源。
OSSA 以及 Taro 社区的建议。我们会积极收集来自社区的声音，集合到 OSSA 后续规划中，同时我们也非常欢迎社区同学能积极输入。OSSA 期待大家共同建言献策。
4. 写在最后
本组件库的开发得益于 Taro 团队所提供的生态，部分组件的设计灵感来源于 Taro UI 组件库，特此感谢。本组件库能够开源，离不开蔡文姬、山下、sven 同学的贡献，在此一并感谢。
最后，欢迎大家 star，以及进群交流。
Github：https://github.com/NeteaseYanxuan/OSSA
5. 参考文档
Taro：https://docs.taro.zone/docs
基于 Taro 开发第三方多端 UI 库：https://docs.taro.zone/docs/ui-lib
bebel 插件 babel-plugin-import：https://github.com/umijs/babel-plugin-import
changesets：https://pnpm.io/using-changesets
Taro UI：https://taro-ui.jd.com/#/
关于本文
作者：@严选技术
原文：https://mp.weixin.qq.com/s/fWpkjlZ0XRR0yrnZfLH56g
关于【开源】相关推荐。欢迎读者自荐投稿，前端早读课等你来