Create React App 零配置部署 Vercel从本地开发到生产构建的完整模板指南【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples在 GitHub 推荐项目精选的 examples 仓库中framework-boilerplates/create-react-app目录提供了一个基于官方 Create React AppCRA脚手架的最小可运行示例其核心价值在于无需任何额外配置即可直接部署到 Vercel。本文以该模板为对象结合仓库内真实源码与配置文件完整讲解 CRA 项目的本地开发、自动化测试、生产构建以及一键部署 Vercel 的完整链路并深入解析react-scripts5.0.1 背后的脚本语义、Vercel Analytics 埋点集成与 PWA 元数据组织方式帮助读者在掌握模板本身的同时理解将其迁移到自有项目的要点。模板概览一个零配置的 CRA 部署示例该目录是一个完整的 Create React App 项目基于 React 18其 README 开宗明义地指出这是一个可以zero configuration零配置部署到 Vercel 的 CRA 站点示例。所谓零配置是指项目根目录下预置了 Vercel 平台可直接识别的标准package.json与public目录结构Vercel 会自动检测到这是 CRA 项目并依次执行npm run build产物目录build的静态托管无需编写vercel.json等额外配置文件。仓库内该示例的实际目录结构如下framework-boilerplates/create-react-app/ ├── public/ # 静态资源目录构建时原样拷贝%PUBLIC_URL% 占位符可被替换 │ ├── favicon.ico # 站点图标 │ ├── index.html # HTML 入口模板 │ ├── logo192.png # 移动端 / Apple 触摸图标192x192 │ ├── logo512.png # PWA 启动图标512x512 │ ├── manifest.json # Web App ManifestPWA 元数据 │ └── robots.txt # 搜索引擎爬虫规则 ├── src/ # 源码目录 │ ├── App.js # 根组件 │ ├── App.css # 根组件样式含 logo 旋转动画 │ ├── App.test.js # 组件测试Testing Library │ ├── index.js # React 应用挂载入口 │ ├── index.css # 全局样式 │ ├── logo.svg # React logo 矢量图 │ ├── reportWebVitals.js # Web Vitals 上报封装 │ ├── setupTests.js # Jest 测试环境初始化 │ └── vitals.js # Vercel Analytics 上报实现 ├── package.json # 依赖与脚本定义 ├── pnpm-lock.yaml # pnpm 锁文件亦可用 npm/yarn 安装 └── README.md # 使用与部署说明本地开发npm start启动开发服务器在项目目录下执行npm start即可启动开发模式。根据 README 的说明应用运行在http://localhost:3000浏览器访问该地址即可查看页面。该脚本在 package.json 中被定义为react-scripts start由 CRA 内置的react-scripts工具链驱动其核心行为包括热更新Hot Reload修改源码并保存后页面会自动刷新无需手动重启Lint 错误提示代码存在语法或规则问题时会在浏览器与控制台中输出 lint 错误开发模式环境变量注入自动注入NODE_ENVdevelopment并支持以.env文件定义的REACT_APP_*前缀环境变量详见下文 Vercel Analytics 一节。应用的实际挂载逻辑位于 src/index.js它使用ReactDOM.render将App /渲染到public/index.html中声明的idroot节点并包裹在React.StrictMode中以启用开发期的严格模式检查ReactDOM.render( React.StrictMode App / /React.StrictMode, document.getElementById(root) );根组件 src/App.js 展示了 CRA 模板的经典形态导入logo.svg与App.css渲染一个带 logo、提示文案与 Learn React 链接的页面。需要注意import logo from ./logo.svg这一写法——CRA 会将小于 10KB 的静态资源自动内联为 Data URI超过阈值则输出为带哈希文件名的独立文件这属于react-scripts内置的 asset 处理策略。自动化测试npm test与 Testing Librarynpm test对应react-scripts test用于启动 Jest 测试运行器的交互式监听模式watch mode代码变更时自动重跑相关测试。该模板内置了完整的测试基建测试用例位于 src/App.test.js使用testing-library/react渲染App /组件并断言页面中存在包含 learn react 文本的链接import { render, screen } from testing-library/react; import App from ./App; test(renders learn react link, () { render(App /); const linkElement screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); });src/setupTests.js 引入了testing-library/jest-dom为断言补充了toBeInTheDocument()、toHaveTextContent()等自定义匹配器依赖方面package.json 中声明了testing-library/react13.4.0、testing-library/user-event14.4.3 与testing-library/jest-dom5.16.5同时package.json的eslintConfig字段同时继承了react-app与react-app/jest两套规则集确保测试文件*.test.js也能获得正确的 lint 与编辑器智能提示支持。生产构建npm run build生成build产物npm run build对应react-scripts build用于生成生产环境产物。README 明确指出构建输出到build文件夹并描述了其关键特性生产模式打包React 以 production 模式正确打包启用压缩minified与 Tree Shaking 等优化文件名带哈希生成的 JS/CSS 文件名包含内容哈希便于浏览器长期缓存并在内容变更后自动失效性能优化react-scripts会自动执行代码分割、资源内联等构建期优化并输出构建体积报告。关于构建的浏览器兼容目标package.json中的browserslist字段给出了两份清单browserslist: { production: [0.2%, not dead, not op_mini all], development: [last 1 chrome version, last 1 firefox version, last 1 safari version] }production覆盖全球使用率超过 0.2% 且仍被维护的浏览器排除 Opera Minidevelopment仅保留最新版 Chrome/Firefox/Safari以加速开发期编译与热更新。browserslist会同时驱动 Babel 的语法转译与 PostCSS 的autoprefixer前缀生成因此修改该字段会影响生产产物体积与兼容范围——这是从模板迁移到自有项目时最值得关注的一个配置点。此外package.json还保留了react-scripts eject脚本执行后会将 CRA 隐藏的 Webpack/Babel/ESLint 配置完整暴露到项目中代价是失去后续随react-scripts升级获得的内置更新除非确有深度定制需求一般不建议使用。一键部署 Vercel零配置的三种方式README 的核心主题是部署围绕Deploy Your Own该模板提供了两种开箱即用的部署路径方式一Vercel Deploy 按钮网页一键克隆部署README 顶部内嵌了官方 Deploy with Vercel 按钮点击后 Vercel 会自动克隆该模板仓库以create-react-app为模板创建新项目并直接完成首次部署。这种方式适合快速体验或作为新项目的起点克隆后即可在 Vercel 控制台中连接自己的 Git 仓库继续迭代。方式二连接 Git 仓库自动部署零配置的核心场景将本项目推送到 Git 仓库并导入 Vercel 后Vercel 会自动识别框架预设Framework Preset依据package.json中的react-scripts依赖自动判定为 Create React App构建命令自动执行npm run build无需手动指定输出目录自动指向build文件夹作为静态资源根目录与本地构建行为一致环境变量支持在 Vercel 项目设置中添加REACT_APP_*前缀的环境变量构建期自动注入。这正是 README 所称 zero configuration 的含义——模板不需要vercel.json一切约定都由平台与react-scripts的标准约定共同完成。README 同时给出了该模板的 Live Example 线上地址读者可将其作为部署效果的参照。提示本仓库目录还提供了pnpm-lock.yaml因此在本地开发时亦可使用pnpm install pnpm start部署到 Vercel 时平台会依据锁文件自动选用对应的包管理器。深度解析模板内置的 Vercel Analytics 集成相比官方create-react-app默认模板本示例额外引入了 Vercel Analytics 的前端埋点代码这是迁移时容易被忽略、却极具实战价值的部分。在 src/index.js 末尾可以看到reportWebVitals(sendToVercelAnalytics);reportWebVitals定义于 src/reportWebVitals.js它会动态加载web-vitals库并依次采集五项核心指标——CLS累积布局偏移、FID首次输入延迟、FCP首次内容绘制、LCP最大内容绘制与 TTFB首字节时间再回调给传入的处理函数。真正执行上报的是 src/vitals.js 中的sendToVercelAnalyticsexport function sendToVercelAnalytics(metric) { const analyticsId process.env.REACT_APP_VERCEL_ANALYTICS_ID; if (!analyticsId) { return; } // 组装 dsn / metric 数据优先使用 navigator.sendBeacon 发送 ... }其实现要点如下环境变量开关只有设置了REACT_APP_VERCEL_ANALYTICS_ID环境变量在 Vercel 项目设置或本地.env中配置才会真正上报未配置时静默跳过不会产生网络请求sendBeacon 优先优先使用navigator.sendBeacon异步发送保证页面卸载时数据不丢失在不支持sendBeacon的环境降级为fetch并设置keepalive: true与credentials: omit数据内容上报体包含dsn、指标id、event_name、value、当前页面pathname与href并额外通过navigator.connection.effectiveType采集网络类型如4g/3g作为speed字段请求格式数据以URLSearchParams编码为application/x-www-form-urlencodedPOST 至 Vercel Analytics 的采集端点。这一模式可以直接复用到任何 CRA 项目只需将vitals.js与reportWebVitals.js拷入src/并在入口文件调用reportWebVitals(sendToVercelAnalytics)即可获得与模板一致的性能埋点能力。PWA 元数据与 public 目录约定public目录是 CRA 的静态资源约定目录其中的文件会原样拷贝到构建产物中。本模板的 public/index.html 展示了几个关键约定%PUBLIC_URL%占位符favicon.ico、logo192.png、manifest.json等资源均以%PUBLIC_URL%/引用构建时会被替换为部署环境的实际公共路径从而同时兼容根路径部署与子路径非根 public URL部署移动端支持声明了viewport、theme-color、apple-touch-icon等元信息根节点div idroot/div是 src/index.js 挂载 React 应用的容器noscript 降级提供禁用 JavaScript 时的提示文案。public/manifest.json 则提供了 Web App Manifest 元数据应用名Create React App Sample、三种尺寸的图标favicon.ico 及 192/512 的 PNG、standalone显示模式、theme_color与background_color。这些字段共同支撑了将站点添加到主屏幕时的 PWA 化体验robots.txt则控制爬虫抓取行为部署到生产环境前可按需调整。依赖版本与脚本速查汇总本模板 package.json 的关键信息便于读者对照自身项目类别内容Reactreact/react-dom^18.2.0构建工具链react-scripts5.0.1CRA 5.x测试testing-library/jest-dom^5.16.5、testing-library/react^13.4.0、testing-library/user-event^14.4.3性能指标web-vitals^3.0.4脚本start/build/test/eject均基于react-scriptsESLinteslintConfig.extends为react-appreact-app/jestBrowserslist生产0.2%, not dead, not op_mini all开发last 1 chrome/firefox/safari version小结从模板到自有项目的三条迁移建议保留零配置部署形态维持package.json中react-scripts的build脚本与根目录public目录结构即可持续享受 Vercel 的自动框架识别无需维护部署配置按需替换脚手架内容删除/改写src/App.js、src/App.test.js与public下的示例资源仅保留index.js的挂载入口与vitals.js/reportWebVitals.js的埋点管线即可快速切换到业务代码谨慎调整 browserslist它是影响构建产物兼容性与体积的关键开关改动前建议对比生产环境的实际浏览器访问分布。通过本模板读者可以完整掌握CRA 本地开发 → 测试 → 生产构建 → Vercel 零配置部署的标准化工作流并理解其中react-scripts脚本体系与 Vercel Analytics 埋点的底层实现为自有 React 项目的快速上云提供可靠参照。【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考