ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Expo CLI 实用指南:从第一条 npx expo start 到生成原生项目

Expo CLI 实用指南:从第一条 npx expo start 到生成原生项目 Expo CLI 实用指南从第一条 npx expo start 到生成原生项目【免费下载链接】expoAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.项目地址: https://gitcode.com/GitHub_Trending/ex/expoExpo CLI 是 Expo 仓库一个用 React 构建 Android、iOS 与 Web 通用应用的开源框架里的命令行工具负责启动开发服务器、安装与 SDK 匹配的依赖、生成原生工程。本文按环境准备 → 跑通服务 → 装依赖 → 出原生代码 → 核对配置的任务顺序讲解每节都以一条可执行命令收尾。环境准备Node 版本与 CLI 的安装方式仓库对运行环境有硬性检查packages/expo/cli/src/index.ts里写死了最低版本Node.js 22.13.0低于这个版本会在 stderr 打印升级警告。先把 Node 升到对应版本这是后续所有命令的前置条件。CLI 不需要单独安装。expo/cli是expo包自带的二进制通过项目本地的 node_modules 调用npx expo --version如果这条命令输出了版本号说明环境已就绪。日常开发中直接npx expo 命令即可注意不要全局安装旧版expo-cli仓库已经明确弃用它部分旧命令见下文迁移提示会直接报错退出。如果你是要进仓库改 CLI 本身流程是pnpm build默认 watch 模式编译出packages/expo/cli/build/bin/cli然后按packages/expo/cli/README.md的建议给它起个别名alias nexpo/path/to/expo/packages/expo/cli/build/bin/cli之后nexpo config调用的就是你本地刚改完的版本调试时配合node --inspect还能挂上 Chrome DevTools。第一次跑起来npx expo start 的几个必会参数npx expo start是默认命令不带子命令时它就是 start作用是启动一个本地开发服务器。它本质是原生运行时Expo Go 或 Dev Client与 JS 打包器Metro 或 Webpack之间的代理默认监听8081 端口。启动后终端里会给出二维码和 URL手机装 Expo Go 扫码、或浏览器打开 Web 端就算跑通了。参数不必全记常用的分三组指定打开目标-aAndroid 设备、-iiOS 模拟器、-wWeb 浏览器一次可传多个-d指定 Dev Client、-g指定 Expo Go。网络形态--host lan默认局域网、--host tunnel走 ngrok任何网络都能连也是替代已废弃--https的方式、--host localhost真机连不上时先用--port 8082换个端口排除占用。打包相关--clear清 Metro 缓存缓存出问题时第一反应就是它、--no-dev按生产模式打包、--offline跳过网络请求并使用匿名 manifest 签名。一个需要说明的设计login、logout、whoami、register这些看起来与启动服务无关的命令也在这里因为 Web 端的 manifest 签名需要 https而签发依赖一个已认证的 Expo 账号。不需要 Web 功能可以不管它们。产出验证终端出现可访问的 URL且浏览器或 Expo Go 里能看到你的应用。装依赖不猜版本npx expo install 的用法React Native 生态里库与 SDK 的版本耦合很紧手填版本号经常装出不兼容的组合。expo install就是为此存在的它读取项目当前 SDK 版本替你选出兼容的库版本再写入 package.json。npx expo install expo-camera expo-location两个值得记住的辅助开关--check只列出哪些已装包版本不对不动手改加--json可以输出结构化结果方便接进 CI。--fix直接把不合法的版本修掉比手动改 package.json 安全。另外--dev会把包放进 devDependencies需要给底层安装器传参时用--透传例如npx expo install react -- --verbose最终等价于yarn add react --verbose。包管理器由锁文件自动识别package-lock.json / yarn.lock / pnpm-lock.yaml / bun.lock 分别对应也可以显式--npm/--pnpm等强制指定。产出验证package.json 里新增的依赖版本与当前 SDK 匹配--check不再报红。生成原生工程npx expo prebuild 的三个关键选项prebuild可以理解为原生代码的打包器它读取项目的 Expo 配置app.json生成android和ios两个可版本化、可重复生成的原生目录。你不必手写原生工程改配置后重新执行即可同步。npx expo prebuild默认行为是先清掉已有的原生目录再重建这是保证结果可复现的关键如果只想在现有目录上增量应用改动比如目录里有你想保留的原生修改加--no-clean。三个常用开关-p android或-p ios只同步一个平台参数接受all/android/ios。--no-install跳过 npm 与 CocoaPods 的安装适合只想看生成结果的场景。--template指定模板来源本地 tar、npm 包或仓库默认模板不符合预期时用。生成完成后用 Xcode / Android Studio 打开对应目录就能继续调试原生代码。核对配置npx expo config 的排查用法改了app.json或app.config.js却怀疑没生效时不要靠猜npx expo config它输出的是合并后的最终配置——名称、图标、scheme、插件解析结果都在里面这是 prebuild 实际依据的输入。README 里对它的定位很明确config是prebuild的辅助命令专门用于调试与查看。配置里的plugins数组就是不改原生代码而定制原生工程的标准入口例如给相机加权限文案改完插件配置后重跑prebuild生效。产出验证终端里看到与你预期一致的合并配置不一致时说明某处覆盖没写对对照app.json排查即可。导出生产产物npx expo export开发阶段之外需要一份优化过的 JavaScript 包时用 exportnpx expo export它会按生产模式打包并输出到 dist 目录Web 产物可直接部署到静态服务器原生端的优化构建由 EAS Build 在云端完成本地这条命令负责的是打包这一环。如果只需要本地起个服务托管已导出的 Web 产物还有npx expo serve可用。遇到旧命令报错看内建的迁移提示很多老教程里的命令在当前 CLI 里已经不存在但仓库特意保留了占位输入旧命令不会静默失败而是打印一行黄色提示告诉你去用哪个替代。源码里这张迁移表packages/expo/cli/src/index.ts的migrationMap覆盖了最常见的几个expo init→ 用npx create-expo-app创建项目expo eject→ 就是现在的npx expo prebuildexpo doctor→ 独立包npx expo-doctorexpo publish/publish:*→ EAS 的eas updateexpo build:ios/build:android→eas build -p ios/eas build -p androidexpo send、client:ios则直接标记为 deprecated 并退出所以下次照着旧博客敲命令报错时先读完终端里那行黄色文字它已经指好路了。下一步可以做什么想理解 CLI 的设计取舍为什么有登录命令、prebuild 如何保证可复现读 packages/expo/cli/README.md 的 Design 与 Contributing 部分。想在自己的项目里完整走一遍流程按官方文档页 docs/pages/more/expo-cli.mdx 对照操作并随手用--help查单个命令的全部参数如npx expo start --help。准备给仓库提 PR 前先看 CONTRIBUTING.md 了解 monorepo 的整体贡献约定再回到 CLI 的 README 学习pnpm build、nexpo别名与EXPO_DEBUG调试技巧。【免费下载链接】expoAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.项目地址: https://gitcode.com/GitHub_Trending/ex/expo创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表