海秋
## 前言 五月份分享了 [应用级 Monorepo 优化方案](https://github.com/worldzhao/blog/issues/9) ，主要阐述了之前 monorepo （Yarn + Lerna）存在的问题以及解决方案，但在该分享里，并没有涉及到 pacakge 发布相关的内容（在那段时期主要是以应用 app 开发为主），偶有 pacakge 开发也是依赖关系较为简单的场景（单包开发/发布），使用 `npm publish` 就能搞定。 随着后续的发展（主要是团队内另一个仓库的迁入），package 开发场景占了相当重的比例（仓库代码行数达到了百万级，项目数超过 100），但多包发布体验并不是很好，主要集中在以下 3 个方面： 1. 发布方式与 Lerna 差异较大，而 Rush...
## 前言 笔者目前所在团队是使用 Monorepo 的方式管理**所有**的业务项目，而随着项目的增多，稳定性以及开发体验受到挑战，诸多问题开始暴露，可以明显感受到现有的 Monorepo 架构已经不足以支撑日渐庞大的业务项目。 现有的 Monorepo 是基于 yarn workspace 实现，通过 link 仓库中的各个 package，达到跨项目复用的目的。package manager 也理所当然的选择了 yarn，虽然依赖了 Lerna，由于发包场景较为稀少，基本没有怎么使用。 可以总结为以下三点： - 通过 yarn workspace link 仓库中的 package - 使用...
在开始进入正题之前，先看看一些与弹窗有关的有趣场景 🤔。 ## 一些有趣的真实场景 ### 案例一：全局弹窗  上图是掘金的登录弹窗，未登录状态下触发该弹窗展示的时机有很多，比如： 1. 点击 Header 上的登录按钮 2. 文章列表页或详情页点赞以及评论文章 3. 发沸点、评论沸点以及点赞沸点 4. ... 开发者往往会基于第三方组件库定义一个 ``，然后将其挂载至 `Root` 组件下： ```TypeScript function App() { const [visible, setVisible] =...
## 前言 **宿主环境各不相同，需要将源码进行相关处理后发布至 npm。** 明确以下目标： 1. 导出类型声明文件； 2. 导出 `UMD`/`Commonjs module`/`ES module` 等 3 种形式产物供使用者引入； 3. 支持样式文件 `css` 引入，而非只有`less`，减少业务方接入成本； 4. 支持按需加载。 然后，向目标前进！ ## 导出类型声明文件 既然是使用`typescript`编写的组件库，那么使用者应当享受到类型系统的好处。 我们可以生成类型声明文件，并在`package.json`中定义入口，如下： **package.json** ```json { "typings":...
## 前言 > 本文为笔者阅读 [react-image](https://github.com/mbrevda/react-image) 源码过程中的总结，若有所错漏烦请指出。 [✨ 仓库传送门](https://github.com/worldzhao/build-your-own-react-image) ``可以说是开发过程中极其常用的标签了。但是很多同学都是``一把梭，直到 UI 小姐姐来找你谈谈人生理想： 1. 图片加载太慢，需要展示`loading`占位符； 2. 图片加载失败，加载备选图片或展示`error`占位符。 作为开发者的我们，可能会经历以下几个阶段： - 第一阶段：`img`标签上使用`onLoad`以及`onError`进行处理； - 第二阶段：写一个较为通用的组件； - 第三阶段：抽离 `hooks`，使用方自定义视图组件（当然也要提供基本组件）； 现在让我们直接从第三阶段开始，看看如何使用少量代码打造一个易用性、封装性以及扩展性俱佳的`image`组件。  ## useImage 首先分析可复用的逻辑，可以发现使用者需要关注三个状态：`loading`、`error`以及`src`，毕竟加载图片也是异步请求嘛。 > 对...
## 前言 在组件库系列文章中介绍了如何从 0 到 1 搭建一个 React 组件库架子，但为了一两个组件去搭建组件库未免显得大材小用。 这次以移动端一个常用组件 `Popup` 为例，以最方便快捷的形式发布一个完整的 npm 包。 > [✨ 仓库传送门](https://github.com/worldzhao/react-easy-popup) > [🚀 在线预览](https://worldzhao.github.io/react-easy-popup/) 本文包含以下内容： 1. `Popup`组件的开发； 2. 一些工具的使用 - [tsdx](https://github.com/jaredpalmer/tsdx) ：项目初始化、开发以及打包大管家； - [np](https://github.com/sindresorhus/np)：一键发布...
这两年收获了很多，在构建大型项目上面积累了一些经验，虽然已经融入在了日常开发协作中，但依旧觉得有必要记录下来，希望对其他同学形成一些参考。 ## （可选）Monorepo > One Team, One Repository, One Guide Monorepo 是一个包含多个不同项目的单一仓库，这不是必须的，但对于我们团队来讲，从中受益良多。 对于开发者来讲，常常会遇到以下实际场景： **维护的多个组件库、配置库或工具库提供给多个业务项目使用** 1. 由于一个项目对应一个仓库，开发者需要操作多个仓库以及分支 2. 需要推动每一个业务接入方升级，更改无法及时扩散到其他项目 与这个问题类似的还有统一改造相关问题，如域名升级、基础库升级等等，一个项目对应一个仓库会导致此类场景很难推进（多仓库、多分支以及多版本号）。 **流程重复建设** 发包流水线，Gitlab CI 流水线等等，需要为每一个项目进行单独配置，存在很多重复工作。 项目开发指南以及规范也很难聚焦，不够透明，无法快速地作用到每一位同学。 通过 Monorepo 可以解决很多此类流程以及规范上的问题，整体团队达到一致与统一，降低沟通损耗，同时随着团队扩大以及项目的增多，模块抽离与复用变得十分容易。 笔者先前有过 [Rush](https://rushjs.io/) 的落地经验，在实践过程中，发现除了最基本的代码共享能力外，还应当至少具备三种能力，即：...
> 本文大部分图片来自互联网  ## 前言 2021 年 12 月 9 号，Vercel 的官方博客上发布了一篇名为 [Vercel acquires Turborepo to accelerate build speed and improve developer experience](https://vercel.com/blog/vercel-acquires-turborepo) 的博文，正如其标题所说，Vercel 收购了 [Turborepo](https://turborepo.org/)，以加速构建速度以及提高开发体验。  > Turborepo 是一个用于...
## 前言 本节主要是讲解如何编写脚本完成以下内容： 1. 版本更新 2. 生成 CHANGELOG 3. 推送至 git 仓库 4. 组件库打包 5. 发布至 npm 6. 打 tag 并推送至 git 如果你对这一节不感兴趣，也可以直接使用 [np](https://www.npmjs.com/package/np) 进行发布，只需要自定义配置一些钩子。 > 本项目是使用 np 进行发布的，本节仅作个人学习用。 **package.json**...
## 前言 在上一节完成项目的基本初始化后，本节主要解决开发组件时的预览以及调试问题，顺路解决文档编写。 此处选择 [dumi](https://d.umijs.org/zh-CN) 作为文档站点工具，并兼具开发调试功能。 ## 集成 dumi ```bash yarn add dumi serve --dev ``` 增加 `npm scripts` 至 `package.json`。 ```json "scripts": { "dev": "dumi dev", // 启动开发环境 在文档站点中调试组件...