脚手架完全指南:用法、模板体系、重命名机制与源码解读)
create-expoCreate Expo App脚手架完全指南用法、模板体系、重命名机制与源码解读【免费下载链接】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导读create-expo是 Expo 官方提供的项目脚手架工具也是npx create-expo-app的底层实现目标是以最快的速度生成可在 Android、iOS 与 Web 上运行的通用 React 应用。本仓库中的 packages/create-expo/README.md 系统讲解了该 CLI 的完整用法默认行为、--template的三种模板来源npm / tarball / GitHub、应用名定制的两步重命名机制与清理sanitization规则以及 npm pack 下的特殊文件处理。本文将围绕该文档展开并深入仓库源码cli.ts、Template.ts、createFileTransform.ts 等印证每一步的真实实现。读完后你既能熟练使用脚手架创建项目也能理解甚至编写符合 Expo 约定的自定义模板。快速开始一行命令创建通用 React 应用create-expo支持 npm、pnpm、yarn、bun 四种包管理器调用方式保持一致# Usage for bun, npm, pnpm, and yarn npx create-expo bun create expo pnpm create expo yarn create expo # Output help information with all available options npx create-expo --help这里存在一个容易被忽略的细节包管理器本身由你如何调用该命令决定。CLI 的帮助文本与 resolvePackageManager.ts 均遵循这一约定——用npx调用则使用 npm用pnpm create调用则使用 pnpm后续依赖安装与命令提示都会跟随该管理器。从源码看--help会输出当前被调用的包管理器对应的运行命令见 cli.ts 的printHelp实现。创建完成后命令行会输出项目就绪提示并给出对应的运行指令- npm run android # 或 yarn/pnpm/bun 对应命令 - npm run ios # 非 macOS 系统会追加需在 Mac 上构建 iOS的注释 - npm run web以上逻辑实现在 Template.ts 的logProjectReady中非 macOS 平台会自动提示 iOS 构建需要 Mac。CLI 全部参数一览除了 README 提到的--templatecreate-expo还内置了多个实用开关。下表基于--help输出与 cli.ts 中arg参数表整理参数别名说明--yes-y使用默认选项创建项目在空目录下自动采用当前目录作为项目根--no-install—跳过 npm 依赖与 CocoaPods 安装--no-agents-md—跳过生成AGENTS.md、CLAUDE.md与.claude/settings.json--template [pkg]-t指定 npm 模板可选值default、blank、blank-typescript、tabs、bare-minimum默认default--example [name]-e从 Expo examples 仓库按名称创建示例项目如with-router--version-v输出版本号--help-h输出帮助信息两个注意点--template与--example互斥同时传入会直接报错见 createAsync.ts。若--template后面不带具体值则会进入模板交互式选择--example同理见 createAsync.ts 与 legacyTemplates.ts 中的别名表。此外仓库根目录的 templates 下实际维护着与帮助文本一一对应的五套模板源码expo-template-bare-minimum、expo-template-blank、expo-template-blank-typescript、expo-template-default、expo-template-tabs。模板机制从默认空项目到官方模板默认情况下Create Expo App 只准备一个空Expo 项目即expo-template-default。想要更多预制功能时使用--template参数# Pick from Expos templates npx create-expo --template # Pick the expo-template-tabs template npx create-expo --template tabs交互式调用不跟名称会弹出一个模板选择器供你挑选直接指定名称则会立即使用对应模板。从 npm 拉取模板Expo 将全部官方模板以 npm 包形式发布包版本随 Expo SDK 版本号对应。仓库 templates 目录即这些 npm 包的源码来源模板发布前会替换其中HelloWorld等占位符。三种 npm 用法# Create from npm npx create-expo --template tabs # Short for expo-template-tabs npx create-expo --template expo-template-tabs # Create from npm using a semver of the template npx create-expo --template expo-template-blank50 # Create from local tarball created with npm pack npx create-expo --template ./path/to/template.tgz其中几个机制值得展开短名展开tabs会被补全为expo-template-tabs。源码中getResolvedTemplateName会先判断名称是否为已知模板别名blank、blank-typescript、tabs、bare-minimum再自动加expo-template-前缀见 utils/npm.ts。数字版本映射expo-template-blank50中的纯数字 tag 会被转换为expo-template-blanksdk-50从而精确对应某个 SDK 版本线同上源码注释blank45 expo-template-blanksdk-45。本地 tarball除--template ./path/to/template.tgz外也支持file:前缀与绝对路径。resolvePackageModuleId会按顺序把参数解析为三种来源之一GitHub 仓库 URL、本地文件路径、npm 包见 Template.ts。本地 tarball 还会禁用下载缓存。缓存与临时目录从 npm 拉取的 tarball 会被缓存到系统临时目录.create-expo-app/template-cache下见 utils/npm.ts可用环境变量EXPO_NO_CACHE关闭缓存。Beta 通道当设置环境变量EXPO_BETA时未显式指定 tag 的模板会自动附加beta标签见applyBetaTagutils/npm.ts。需要注意Create Expo App不支持私有 npm registry。要使用私有模板唯一途径是先用npm pack打出本地 tarball再通过本地文件路径方式传入。从 GitHub 拉取模板除了 Expo 官方 npm 模板--template同样接受 GitHub 仓库 URL且支持:owner/:repo简写——源码中检测到包含/但非 scoped 包、非路径、非协议开头的参数时会自动补全为https://github.com/...见 Template.ts。三种 URL 形式# Create from repository npx create-expo --template https://github.com/:owner/:repo # Create from repository using the :ref branch or tag npx create-expo --template https://github.com/:owner/:repo/tree/:ref # Create from repository using the sdk-50 branch, and templates/expo-template-bare-minimum subdirectory npx create-expo --template https://github.com/expo/expo/tree/sdk-50/templates/expo-template-bare-minimum第三种写法说明tree/:ref/...路径中可以继续指定仓库内的子目录例如用sdk-50分支下templates/expo-template-bare-minimum子目录作为模板来源。GitHub 模板的下载与解压逻辑集中在 utils/github.ts配合downloadAndExtractGitHubRepositoryAsync使用解压后同样走后续的重命名与清理流程。应用名定制模板占位符如何变成你的项目名用户指定的项目名会被写入解压出的模板——这个过程对多数用户完全透明但如果你打算发布自己的模板就有必要了解其背后的机制。应用名重写分为两步解压阶段改写文件与文件夹名如HelloWorld.xcodeproj目录会被重命名为你的项目名.xcodeproj解压完成后改写文件内容。这是 README 的核心结论。从源码看第 1 步由createEntryRenamer(name)在 tar 解压逐条路径时完成见 createFileTransform.tsAndroid 目录下的路径会使用小写清理名第 2 步在解压后通过renameTemplateAppNameAsync对所有重命名配置指定的文件执行全局查找替换见 Template.ts。三个占位符约定Expo 模板按约定使用以下三个占位符分别对应重命名的不同形态占位符替换结果仓库内真实示例Hello App Display Name项目名原样写入不做修改Android strings.xml应用显示名HelloWorld经过下述清理规则处理的项目名Android settings.gradlerootProject.name HelloWorldhelloworld清理后项目名的全小写形式Android app/build.gradlenamespace/applicationId中的com.helloworld替换动作本身由正则一次性完成见 Template.ts其中对.xml与.plist文件会先做 XML 特殊字符转义、、等见 Template.ts 的escapeXMLCharacters防止项目名包含特殊字符时破坏 XML 结构。重命名配置rename config哪些文件会被改写虽然所有文件与文件夹名都会被重写但文件内容只有重命名配置中列出的文件才会被处理。该配置由defaultRenameConfig常量定义见 Template.ts一份典型的默认配置如下# Common !**/node_modules app.json # Android android/**/*.gradle android/app/BUCK android/app/src/**/*.java android/app/src/**/*.kt android/app/src/**/*.xml # iOS ios/Podfile ios/**/*.xcodeproj/project.pbxproj ios/**/*.xcodeproj/xcshareddata/xcschemes/*.xcscheme ios/**/*.xcworkspace/contents.xcworkspacedata # macOS macos/Podfile macos/**/*.xcodeproj/project.pbxproj macos/**/*.xcodeproj/xcshareddata/xcschemes/*.xcscheme macos/**/*.xcworkspace/contents.xcworkspacedata配置采用 glob 表达式支持#注释、空白行忽略、以!开头的排除规则匹配时matchBase: true允许*.xml命中所有子目录、dot: true且follow: false不跟随符号链接防止路径逃逸出模板目录见 Template.ts。如果你要发布自定义模板可自行实现一套更匹配的文件清单。从源码注释可以进一步推断若模板携带.create-expo.json其renamePatterns字段可覆盖默认重命名配置该文件被读取后会被立即删除确保它不会泄漏进用户项目见 Template.ts。这意味着控制重写范围的可配置化已被内置到工具中。清理规则Sanitization项目名如何被净化某些字符不允许出现在特定的工程位置如 package 名、包名因此 create-expo 会对项目名做以下清理实现于 createFileTransform.ts 的sanitizedName移除所有非单词字符\W与下划线_使用 Unicode 规范化形式NFDcanonical decomposition对字符串做分解移除所有变音符号Unicode 区间u0300-u036f。效果举例项目名带空格、连字符或中文拼音变音符时得到的HelloWorld替换值会被压缩为连续的字母/数字形式保证生成的 gradle 工程名、package 名、iOS target 名合法。特殊文件绕开 npm pack 的限制由于npm pack存在一些已知限制个别文件在模板中需要特殊存放gitignore→.gitignorenpm pack 会跳过.gitignore文件历史 issue 见 npm/npm#1862因此模板包内以无点前缀的gitignore命名。解压时createEntryRenamer会将其重命名为.gitignore见 createFileTransform.ts。仓库配套的默认 ignore 模板存放在 packages/create-expo/template/gitignore。点目录用下划线命名.vscode、.eas、.github、.cursor这类目录可以被模板包含但需以下划线替代点号——例如_vscode而非.vscode。解压时正则会将_eas、_vscode、_github、_cursor还原为带点的目录名见 createFileTransform.ts 的SUPPORTED_DIRECTORIES。若模板需自定义这组目录名可向 Expo 仓库提交改动。如果你要自己用npm pack制作模板请务必遵守这两条命名约定否则.gitignore会缺失、点目录会被丢弃。解压之后的净化让模板真正属于用户即使文件与内容中的占位符都替换完毕模板包自带的元数据仍需清理。sanitizeTemplateAsync见 Template.ts会在解压与重命名后执行以下动作补全.gitignore若模板未自带则从内置的template/gitignore复制一份若模板自带则启发式检查其中是否已忽略ios/android目录用于后续脚本推断。回写app.json将项目名写入name与slug默认{ name: projectName, slug: projectName }并与模板原有配置做深合并。改写package.jsonname按 npm 命名规则清理去除首部的./_、非法字符统一小写version重置为1.0.0private置为true删除模板包的description、tags、repository等发布元数据仅在缺少android/ios脚本时补充若模板含原生目录则加expo run:android/expo run:ios若原生目录已被.gitignore忽略则加expo start --android/expo start --ios否则保持模板自带脚本不动仅当许可证为模板常用的0BSD时将其删除其他许可证保留。可见从模板到项目的转换是一个完整的三段式流水线解压改名 → 按配置改写内容 → 清理元数据入口即 Template.ts 的extractAndPrepareTemplateAppAsync。一次完整创建背后发生了什么将上述各环节串起来npx create-expo my-app的真实执行链路为见 createAsync.ts 的createTemplateAsync解析--template交互式选择或取参数缺省为expo-template-default并判断是否需要按 SDK 版本做提示/降级applySdkVersionToTemplateAsync校验项目根目录目录必须为空、项目名不能为空且只能包含 URL 友好字符正则^[a-z0-9.\-_]$见 Template.ts同时拒绝react-native、react、expo、expo-router等被占用的名称FORBIDDEN_NAMESTemplate.ts下载并解压模板npm / tarball / GitHub 三选一按resolvePackageModuleId判定执行上文的两步重命名与sanitizeTemplateAsync清理解析当前调用的包管理器写入锁文件偏好monorepo 模板还会归一化 workspace 依赖并生成pnpm-workspace.yaml随后安装 npm 依赖若目录含ios/且当前为 macOS则继续执行 CocoaPods 安装pod install失败不阻断创建仅告警默认生成AGENTS.md、CLAUDE.md、.claude/settings.json可用--no-agents-md关闭若不在已有 Git 仓库内则静默执行git init成功或失败均会上报匿名遥测可用环境变量EXPO_NO_TELEMETRY全局关闭最后检查 CLI 自身是否有新版本可更新。创建失败时CLI 会尽量保证项目已生成但依赖未装好也能继续使用——npm 或 CocoaPods 安装失败只会打印后续手动安装指引npm install、npx pod-install而不会中断整体流程见 createAsync.ts。进一步阅读如果你打算深入定制或向社区贡献模板推荐在仓库内按以下路径继续研读全部内置模板源码templates对照阅读可直观理解占位符在各平台工程文件中的分布核心流水线与重命名配置src/Template.ts路径/占位符/特殊文件重写src/createFileTransform.tsnpm 别名、SDK 版本映射与 tarball 缓存src/utils/npm.tsCLI 入口与参数解析src/cli.ts端到端测试覆盖真实创建流程packages/create-expo/e2e以及单元测试 src/tests其中Template.test.ts、createFileTransformer.test.ts直接对应本指南介绍的重命名与文件转换逻辑。运行前提上需注意该包当前要求 Node.js^22.13.0 || ^24.3.0 || ^26.0.0 || 27.0.0见 packages/create-expo/package.json创建含原生 iOS 工程的项目并自动安装 Pods 仅支持 macOS 环境。【免费下载链接】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),仅供参考