如何用 email build 和 email start 构建并启动 React Email 预览应用【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-emailReact Email 的 CLI 默认提供email dev开发服务器适合边写边看。当你不再需要文件监听和自动重建而是想要一份可以独立运行、可以直接交给平台托管的预览应用时就用email build和email start这对命令email build把预览应用复制进.react-email目录并完成构建email start则运行.react-email里已构建好的预览应用。这篇文章面向已经装好 React Email、有现成邮件模板的开发者任务是完成「构建 → 启动 → 验证 → 可选部署到 Vercel」这条连续路径。准备条件已按官方流程接入 React Email。两种方式都提供emails模板目录自动方式npx create-emaillatest会生成一个包含若干邮件模板的react-email-starter文件夹见 Automatic Setup手动方式在现有项目中安装react-email、react、react-dom并自建emails目录和模板文件见 Manual Setup。安装好依赖npm install/pnpm install等。邮件模板放在项目根目录的emails文件夹里这是email build的--dir默认值如果你的模板目录在别处需要用--dir指定。第一步用 email build 构建预览应用在项目根目录执行npx react-email build这条命令的作用按官方 CLI 文档的定义是把预览应用复制copy到.react-email目录并对它执行构建。构建完成后你的项目里会多出一个.react-email目录里面就是构建好的预览应用。可选参数摘自 CLI 文档参数类型默认值说明--dirstringemails指向你的邮件模板目录--packageManagerstringnpm在.react-email安装依赖时使用的包管理器模板目录不在默认位置时npx react-email build --dir ./src/emails不确定的选项可以随时用email help cmd查看某个命令的全部选项。第二步用 email start 启动构建产物构建完成后执行npx react-email startemail start的职责只有一件事运行.react-email目录里已构建好的预览应用。它不负责重新构建所以顺序必须是先email build再email start——如果.react-email里还没有构建产物先回到上一步。在package.json里固化这两个脚本和手动安装文档中为email dev加脚本的方式一致{ scripts: { build: email build, start: email start } }验证结果构建侧email build结束后项目根目录应存在.react-email目录。它就是构建产物的落点也是email start的运行入口。运行侧email start把构建好的预览应用在浏览器中跑起来你在其中看到的页面就是emails目录里那些模板的预览。官方文档对开发服务器的描述是监听指定目录并自动重建而email start运行的是构建产物不再有文件监听行为。如果只是想快速确认选项拼写或默认值用email help build、email help start。一个边界要清楚预览应用里通过/static/...提供的静态文件例如emails/static下的图片只是预览服务器在本地直接伺服的不会随你实际发出去的邮件一起加载。文档建议在真实发送时使用生产环境的外部地址比如根据process.env.NODE_ENV切换baseURL详见 CLI 文档的说明。可选分支把构建产物部署到 Vercel官方 Deployment 文档 给出了一条把.react-email构建结果部署到 Vercel 的路径共三步都围绕email build的产物展开在./package.json中加入 build 脚本{ scripts: { build: email build } }在 Vercel 项目设置里把 Framework Preset 改为 Next.js并且devDependencies里必须加上next否则无法正常工作文档注明这是 Vercel 的 Next 框架预设的限制{ devDependencies: { next: latest, } }把 Output Directory 改为.react-email/.next。文档中给出的最终设置示例与 email dev 的分工三者对应同一条预览链路的三个阶段按需选择不要混着理解email dev本地开发服务器监听--dir指定目录默认emails文件改动自动重建默认端口 3000--port可调email build生成构建产物到.react-email供email start或托管平台使用email start运行.react-email里的构建产物是构建完成后启动预览应用的方式。另外提醒一点避免把路径走岔email export是把邮件渲染成out目录下的纯 HTML 文件官方文档明确把它定位为render工具之外的次要方式和本文的「构建并启动预览应用」不是一条路径除非平台强制要求手动模板化例如需要非 JavaScript 后端处理邮件内容否则不必用它。【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考