用途 web-support 针对 Expo 应用的 Web 构建,把 Web 当作有意选择的目标平台来对待,而不是导出成功即视为可用。它适用于为 React Native / Expo 应用添加 Web 支持、创建 .web.tsx 平台文件或执行 expo export 的场景。
主要规则与能力
- 目标与契约:Web 必须显式声明或显式排除。保留 Web 时需设置 web.output(默认 static on EAS Hosting),并在 contracts/web.json 记录输出方式、宿主机与冒烟路由。
- 平台文件配对:每个 x.web.ts / x.native.ts / x.ios.ts / x.android.ts 都需要同扩展名的基文件,否则 Metro 与 TypeScript 解析会出错;Web 文件必须导出基文件的同名值与类型(使用 import type * as Native)。
- 模块支持:在浏览器中失败的包(如 react-native-google-mobile-ads、expo-iap、expo-secure-store、expo-file-system、expo-notifications 等)只能出现在由 .web 适配器替代的文件中,适配器需如实说明不支持或不可用。
- React Native API 缺口:禁止在 Web 包中使用 react-native-web 缺失、静默或行为错误的 API(如 ToastAndroid、Alert.prompt、Alert.alert 确认框、AccessibilityInfo.isScreenReaderEnabled),除非有 Platform.OS 守卫、Platform.select 函数值或 typeof 检测。
- 浏览器全局与 SSR:window、document、localStorage 等只能出现在 .web 文件;静态或服务端输出时模块顶层不得读取浏览器全局。
- 令牌存储:Web 端会话令牌保存在内存或服务端设置的 httpOnly cookie 中,不得使用本地存储。
- expo-sqlite:需在 metro.config.js 中使用 withWebSqlite,宿主机发送 Cross-Origin-Embedder-Policy: require-corp 与 Cross-Origin-Opener-Policy: same-origin;根布局最外层返回 WebStorageGate,处理预热、单标签锁与其他标签/不支持的提示。
- 国际化与错误:direction.web.ts 维护 <html dir>,syncDocumentLanguage 设置 <html lang>;app-error-net.web.ts 通过 window 的 error 与 unhandledrejection 事件捕获错误。
- 路由与导出:动态路由在静态宿主机上需 generateStaticParams 或重写规则;生产导出后必须用 check-web-export.mjs 在真实浏览器中打开冒烟路由验证。
使用方式 先读取方法论文档决定是否构建 Web;运行 check-web-support.mjs 检查源码缺口;按模板复制根 HTML、错误网络、方向与语言文件、SQLite 适配器与 WebStorageGate;再处理模块与 API 缺口、布局输入、单元测试;通过 typecheck、ESLint、Jest 后执行生产导出并用 check-web-export.mjs 冒烟,直到 RESULT: PASS。
适用场景与限制 适用于 Expo(含 SDK 57、react-native-web 0.21.3)应用的 Web 发布前准备与审查。限制:资料基于特定版本与无头 Chrome 测量,未提供其他版本兼容性、收费、平台或价格信息;部署(eas deploy 或上传宿主机)需先询问开发者。