经过三年的积累和迭代，网易精心挑选的多终端组件库——OSSA正式开源。 我们诚邀有多终端需求的团队试用并相互交流。 我们也热忱欢迎对开源、多终端、组件库感兴趣的同学参与OSSA组件库的建设。

一、背景

1.1 为什么它是多方面的？

为了适应业务的发展，网易在业务迭代过程中精心挑选了前端主站团队推出了微信小程序、字节小程序和支付宝小程序。 此外，还有其他业务线需要同时维护小程序和H5端。 综合考虑用户体验和开发效率后，我们决定使用多终端框架Taro来开发部分业务（框架选型不是本文的重点，这里不再详细讨论）。

1.2 为什么要制作自己的组件库？

选择了Taro框架后，我们从保证网易精心挑选的视觉风格统一、提升开发体验的角度出发，开始寻找合适的基础组件库。 截至 2019 年，Taro 生态中可用的组件库仍然非常有限。 当前时间点的开源组件库如下表所示。 经过调查对比，我们发现现有组件库的视觉风格与网易严选的现有风格差异较大，不符合设计部门的要求。 经过综合考虑，我们决定创建一套新的属于我们自己的基础组件库。

2. OSSA组件库 2.1 特点 2.2 架构设计

OSSA的整体架构设计如下图所示。

需要说明的是，当我们准备开始的时候，我们并没有选择真正从0到1。 首先，Taro官方提供了一个通过Taro创建UI组件库的模板。 通过这个模板，我们可以快速创建一个组件库。 其次，我们的核心要求是基础组件符合我们的设计规范并且易于使用。 因此，经过综合考虑，我们结合团队内部需求，基于官方模板开发了组件库。

2.3

目前，OSSA包括基本组件和演示。 未来将会有官方网站、业务组件库以及其他基于Taro的资料。 为了方便项目管理，我们采用表单来管理项目。 提到这里，首先想到的就是很久没有维护了（最近维护过）。 在考察了一些开源项目后，我们决定使用pnpm进行管理。

2.4 编译/打包

在编译和打包方面，OSSA目前使用的是官网组件库模板提供的能力。 目前，将编译并输出cjs和esm两种格式的文件。 另外，组件代码会通过tsc直接编译输出。 使用时发现Taro项目中编译当前esm格式包时，组件库没有树化。 这意味着虽然输出了esm包，但是我们的组件库仍然不支持开箱即用。 在编译阶段尝试了各种优化后网易严选小程序开发，我们感觉组件的一些写法有副作用，导致树失败。 我们将在后续的组件库迭代中更新它。

为了支持按需引入，我们暂时推荐使用Taro项目中的插件进行处理。 ..js中需要添加以下配置：

2.5 部署/承包

由于pnpm目前还没有同样完整的发包功能，所以官方建议一起使用。 还可以实施交互式外包流程。 可以通过配置自动触发发布过程。

2.6 规格

为了组件库的长期健康发展，我们在组件库开发初期成立了组件评审委员会，制定了添加组件的流程和规范。 添加新组件的流程如下图所示。 从图中可以看出，在确认需要添加新的组件后，委员会的设计生首先需要进行交互和视觉设计。 只有愿景和交互通过审核后，才会开始正式开发。 开发完成后，需要经过各方验证和检查，才能正式入库。

在组件开发层面，除了通过 保证统一的编码风格外，我们还制定了详细的命名和风格编写规范。 为了保证质量，目前组件库的demo已经过全面的端到端测试。

2.7 组件

目前OSSA开源的仅包括基础组件库部分。 我们将基本组件分为基本、输入、输出、反馈和导航类别。 具体组件这里就不一一列举了。 您可以扫描DEMO二维码进行体验：

除了基础组件之外，我们在业务发展过程中也积累了一些业务组件，特别是在电商领域。 此外，网易严选前端团队在其他业务的实践中也积累了一些基于Taro的多终端素材。 后续完善后我们会一起开源，敬请期待。

3、后续规划

OSSA组件库未来将重点从以下几个方面进行迭代。 我们希望对多终端和OSSA感兴趣的同学能够一起参与OSSA的建设。

更完整的组件测试用例。 作为一个可持续高质量迭代的OSSA组件库，目前覆盖了H5的所有端到端用例。 我们将不断丰富用例集和用例质量，保障OSSA的高质量发展。 我们将在后续迭代中完善OSSA的完整测试用例。

扩展基本组件库。 目前，OSSA 拥有 30 多个组件。 虽然可以满足日常开发的需求，但还是有一些场景没有覆盖到。 未来我们将在完善现有基础组件的基础上，扩充基础组件库。

开源业务组件库和材料。 我们在多终端上走过了很多坑，总结了一些经验，积累了一些业务相关的组件和材料。 为了避免陷阱并回馈社区，我们未来将逐步开源业务组件和材料。

来自 OSSA 和 Taro 社区的建议。 我们将积极收集社区的声音，并将其融入到OSSA的后续规划中。 同时，我们也非常欢迎社区学生的积极投入。 OSSA期待大家共同建言献策。

4.写在最后

该组件库的开发得益于Taro团队提供的生态系统。 部分组件的设计灵感来自于Taro UI组件库。 非常感谢。 这个组件库能够开源，离不开蔡文姬、山下、Sven 的贡献。 我要感谢他们所有人。

最后欢迎大家star并进群交流。

5. 参考文档

本文由作者授权严选技术团队发表。