陌上人如玉
公子世无双

10-工程化与生态

React 工程化与生态:TypeScript、样式方案、测试、代码规范、组件分层、设计系统、Monorepo、微前端、PWA、无障碍,以及 React Native 与 Expo。
10.15 React Native / Expo 概览-陌上寒

10.15 React Native / Expo 概览

React Native 不是「把 React 跑在浏览器里」,而是「换掉渲染器(react-dom → 原生组件)+ 换掉宿主环境(DOM → Native)」——所以「React 的心智模型(组件/状态/Hooks/单向数据流)完全通用」,但「没有 DOM、没有 CSS、没有 URL」意味着 W…

赞(0)陌上寒陌上寒阅读()去评论
10.14 构建性能与 CI 加速-陌上寒

10.14 构建性能与 CI 加速

构建与 CI 的加速只有三条路——「少做(缓存命中就不干活)、做快(换更快的工具、把类型检查拿出来)、并行(拆 job、分片、并行任务图)」;而这三条的前提都是「先量出来慢在哪」——不测量的优化基本等于乱猜。

赞(0)陌上寒陌上寒阅读()去评论
10.13 设计稿到代码-陌上寒

10.13 设计稿到代码

设计稿到代码的正确流程是「先把设计稿里的『值』对齐到 token,再写组件」——因为设计稿是静态且不完整的(没有 hover/disabled/loading/空态/长文本/小屏),所以「逐像素还原」是错的目标,「用 token 把它翻译成一致的实现,并把设计稿的缺失项补全」才是对的。

赞(0)陌上寒陌上寒阅读()去评论
10.12 无障碍工程化-陌上寒

10.12 无障碍工程化

无障碍的第一原则是「能用原生 HTML 就用原生 HTML」(语义、键盘、屏幕阅读器全都白送),第二原则是「键盘能完成一切操作且焦点始终可见可知」——ARIA 只是「原生表达不了时的补丁」,而不是「装饰性的属性堆砌」。

赞(0)陌上寒陌上寒阅读()去评论
10.11 PWA 与 Service Worker-陌上寒

10.11 PWA 与 Service Worker

PWA 的本质是「用 manifest 声明『我是一个应用』 + 用 Service Worker 拦截网络请求」,它的价值是「可安装、离线可用、后台能力(同步/推送)」;而最容易被做坏的恰恰是更新机制——「缓存优先」会让用户永远看到旧版本,所以「版本更新 + 提示刷新」必须一开始就设计好。

赞(0)陌上寒陌上寒阅读()去评论
10.10 微前端落地-陌上寒

10.10 微前端落地

微前端解决的是「多个团队/多套技术栈的应用要合成一个站点」的组织问题,而不是技术问题——它的真正难点全在「隔离(JS 沙箱 + 样式隔离) 与 共享(依赖、状态、路由)」这两件事上,而「依赖共享(尤其是 React 版本)」是最容易翻车的地方。

赞(0)陌上寒陌上寒阅读()去评论
10.9 Monorepo 工具链-陌上寒

10.9 Monorepo 工具链

Monorepo 的价值是「原子提交 + 共享代码 + 统一工具链」,代价是「构建与 CI 的复杂度」;所以它的核心不是「把所有代码放一起」,而是「依赖声明清楚(pnpm workspace)+ 任务图与缓存(Turbo/Nx)+ 类型可解析(project references)+ 版本可追溯(c…

赞(0)陌上寒陌上寒阅读()去评论
10.8 组件库与设计系统-陌上寒

10.8 组件库与设计系统

设计系统的核心是「用 token 把『设计决策』抽成变量」——原始层(primitive)→ 语义层(semantic)→ 组件层(component) 三层 token 是一切的地基;而组件库的工程重点是「保留源码形态的构建产物(不打包依赖)+ 类型 + 文档 + 视觉回归 + 版本管理」。

赞(0)陌上寒陌上寒阅读()去评论
10.7 国际化与主题-陌上寒

10.7 国际化与主题

国际化(i18n)的核心是「文案与代码分离 + 运行时切换」(用 react-i18next / next-intl,配合 Intl 做日期数字格式化);主题的核心是「CSS 变量 + data-theme 属性」(零运行时、无闪烁)。

赞(0)陌上寒陌上寒阅读()去评论
10.6 目录结构与组件分层-陌上寒

10.6 目录结构与组件分层

目录结构有「按类型划分(type-first)」与「按功能划分(feature-first)」两派——中大型项目推荐 feature-first(改需求只动一个目录);组件则按「基础 → 组合 → 业务 → 页面」四层组织,公共组件的沉淀要有标准。

赞(0)陌上寒陌上寒阅读()去评论