耿健的个人博客

一个即将放飞理想的咸鱼博主

0%

43.研究搭建一个前端轮子组织orz2

发表于 更新于 Valine：
本文字数： 1.8k 阅读时长 ≈ 2 分钟

书写背景

从事前端开发许多年，总是绕不开想要造个轮子练练手。
我个人是不喜欢别人造轮子的，
因为没品味的人造的轮子除了增加其他开发人员的心智负担，对工作效率只能是负提升。
我个人又是希望自己能够造个轮子出来，
因为我觉得我还挺有品味的。[狗头]

产品想法

我希望能够作出来的一个多框架多端组件库的产品。

多框架指的是：Vue2 + Vue3 + React
多端指的是：移动端 h5 + 电脑端 pc

同时具备即时可预览可交互的在线文档。

可预览指的是：在线文档页面即可看到组件的样子，所见即所得。
可交互指的是：会将组件的传入参数可以在文档页面输入，组件就会展示对应的预期样子。

达到的目的就是：
通过项目的一个命令，就可以分别打包 vue2、3、React 组件、微信小程序原生等等各端组件库，同时也会打包一些通用公共方法，这些方法可以被各端组件去调用。
最理想状态下的实现就是，UI 与逻辑完全解耦，组件部分只去实现 UI 渲染，而业务逻辑完全在公共方法内去实现。

em…我承认这样有点难搞，先把目标定高一点，后续的人生里慢慢实现吧。

结构介绍

组织内搭建如下几个库（对应代码目录packages）：

  1. @orz2/config

封装一个为开发人员存放常用配置的统一数据源。
比如：postcss 所需的一些参数，这样在后续的组件库中配置信息的时候，都要求使用本库内的变量以保证各个组件库的一致性。

  1. @orz2/kits

封装一个应用在 node.js 的公共方法库。
比如：获取 git 最新 commit 等信息、企微/飞书机器人发送消息等。

  1. @orz2/utils

封装一个应用在 JavaScript 的公共方法库。
不仅可以为后续的组件库提供支持，也可以在项目的一些脚本上提供支持。
比如：解析 url 的参数转为对象等。

  1. @orz2/vue2-h5

封装一个基于 vue2 框架用于 h5 移动端的 ui 组件库。

  1. @orz2/vue3-h5

封装一个基于 vue3 框架用于 h5 移动端的 ui 组件库。

  1. @orz2/${frame}-${platform}

封装一个基于frame框架用于platform端的 ui 组件库。

待完善的后续组件库…

上述的组件库想要展示同时需要有承载页面（对应代码目录subs）

  1. vue2-h5

封装一个基于 vue2 语法用于 h5 移动端的组件承载页面。
同时基于对应组件的 README.md 文件来动态展示对应组件的介绍、预览、交互功能。

  1. vue3-h5

封装一个基于 vue3 语法用于 h5 移动端的组件承载页面。
同时基于对应组件的 README.md 文件来动态展示对应组件的介绍、预览、交互功能。

  1. ${frame}-${platform}

封装一个基于frame语法用于platform端的组件承载页面。
同时基于对应组件的 README.md 文件来动态展示对应组件的介绍、预览、交互功能。

需要把承载页面集成到一个微前端基座项目中（对应代码目录orz2-ui）

通过应用 wujie 微前端框架，来对上述的几个子应用承载页面进行整合。
基座项目是基于 vue2 语法构建的。

开发环境

通过 turbo 来对各个应用进行批量启动、批量打包。
同时也借助 pnpm Monorepo 技术方案，方便管理一个仓库的多个项目。

如何打包一个组件库

我准备借助 vite、rollup 这些打包工具来对组件库进行打包。
与 webpack 相比，rollup 更适合打包组件库，而 vite 也是基于 rollup 的基础上实现的。

通过 rollup 打包出来的代码体积很小，
而且 ESM 模块天然会携带 tree shaking 功能，只会打包所需的模块，
这样也可以减轻业务端的代码体积压力。

参考资料