以 CRA v4 作为 Web 宿主，配合 RN 与 React Native Web 共享代码并强制提交前 lint

方案简介

本配方是 react-native-web-monorepo 中基于 Create React App 的 Web 端变体：在 monorepo 中以 packages/web-cra 作为 Web 包，通过 yarn workspace web-cra start 启动，复用与移动端相同的 React Native 业务代码（经 React Native Web 渲染）。项目同时配置了 TypeScript v4、ESLint（含 airbnb-typescript、prettier、jsx-a11y、react-hooks 等插件）与 husky 4 + lint-staged 10，在 git 提交前自动格式化与检查代码，适合偏好 CRA 简单配置而非 Next.js 的团队。

亮点与能力

• CRA v4 一条命令启动 Web 端
• 与移动端共享 React Native 组件代码
• ESLint airbnb-typescript 规范 + Prettier 格式化
• husky + lint-staged 实现 pre-commit 自动检查
• TypeScript v4 全量类型

组成与分工

• Create React App v4：Web 端脚手架与开发服务器
• React Native / React Native Web：共享 UI 代码的移动端框架与 Web 渲染层
• ESLint + eslint-config-airbnb-typescript：代码规范检查
• Prettier + eslint-plugin-prettier：格式化并集成进 lint
• husky 4 + lint-staged 10：git 钩子，仅对暂存文件执行校验
• @react-native-community/eslint-config：RN 官方 ESLint 规则

实施步骤

1. 安装

$ git clone git@github.com:brunolemos/react-native-web-monorepo.git
$ cd react-native-web-monorepo
$ yarn

2. 启动 CRA Web 包

$ yarn workspace web-cra start

提交代码时 husky 钩子自动运行 lint-staged，对暂存文件执行 Prettier 与 ESLint。

优缺点

• ✓ Web 端零配置 CRA 启动
• ✓ 提交自动校验代码
• ✕ 依赖清单表明 ESLint 配置链复杂

出处

本方案挖掘自开源项目 brunolemos/react-native-web-monorepo，方案内容与实施命令均来自其 README 原文。