React Email CLI 实战指南从模板初始化到本地预览与静态导出【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email本篇技术指南以 react-email 仓库中 packages/react-email/readme.md 为核心主体系统讲解 React Email CLI 的完整工作流用npx create-email初始化邮件模板工程、用email dev启动带热重载的本地预览服务器、用email export将 React 组件批量渲染为静态 HTML 文件以及如何在 monorepo 环境中全局链接 CLI 源码进行开发调试。读完本文你将掌握这套 CLI 的全部命令、参数与底层实现原理可直接上手搭建自己的邮件开发流水线。快速开始用 create-email 初始化邮件工程React Email 采用以 React 组件编写邮件的开发范式——邮件模板就是普通的.tsx文件编译后产出可在任意邮件客户端中渲染的 HTML。开始之前请确保本机满足运行时要求根据 packages/react-email/package.json 中的engines字段需要Node.js 20.0.0CLI 同样在启动时校验主版本号低于 20 会直接报错退出见 start-dev-server.ts。打开一个新的终端 shell运行npx create-email该命令会创建一个名为emails的新文件夹其中内置了若干可直接运行的邮件模板。对应的初始化逻辑位于 packages/create-email其中 tree.js 负责将 template/emails 目录下的模板文件含欢迎邮件等 4 个.tsx模板与配套静态图片复制到目标工程。初始化完成后emails目录结构大致如下emails/ ├── welcome.tsx # 可直接预览/导出的邮件模板 ├── ... # 其他内置示例模板 └── static/ # 邮件引用的静态资源图片等CLI 命令全景react-email包通过bin字段暴露email可执行命令见 packages/react-email/package.json其入口为 packages/react-email/src/cli/index.ts基于 commander 解析参数。该入口实际注册了 5 个子命令命令用途对应实现email dev启动带热重载的本地预览服务器commands/dev.tsemail build将预览应用复制到.react-email并构建commands/build.tsemail start运行.react-email中已构建的预览应用commands/start.tsemail export将全部模板渲染为静态 HTML 输出到out目录commands/export.tsemail resend setup / reset配置 / 清除与 Resend 账户的 API Key 集成commands/resend此外入口还做了一件不引人注意的事由于预览应用依赖 Node 的--experimental-vm-modules标志CLI 会在检测到缺少必要 flags 时用spawn重新拉起自身进程index.ts因此用户无需手动附加 Node 参数。email dev启动一个本地开发服务器监视你的文件变化并自动重新构建邮件修改即可在浏览器中即时看到效果npx react-email devdev子命令支持以下参数定义见 index.ts参数说明默认值-d, --dir path存放邮件模板的目录./emails-p, --port port开发服务器监听端口3000-c, --clients clients逗号分隔的邮件客户端列表用于展示兼容性警告会覆盖COMPATIBILITY_EMAIL_CLIENTS环境变量不传几点值得注意的行为细节目录不存在时直接报错退出dev命令首先检查--dir指向的文件夹是否存在缺失则打印Missing dir folder并以退出码 1 结束见 commands/dev.ts。端口自动递增当目标端口被占用时CLI 会打印警告并尝试port 1以此类推见 start-dev-server.ts。--clients参数严格校验仅接受 email-clients.ts 中定义的白名单客户端名传入未知客户端会抛出Unknown email client(s)错误见 index.ts。启动成功后会打印预览地址形如Running preview at: http://localhost:3000。从源码实现看预览服务器本身是一个包在 Nodehttp.Server中的 Next.js 应用next({ dev: false, ... })静态资源请求直接由 CLI 转发到邮件目录下的static/文件夹其余请求交给 Next 应用处理见 start-dev-server.ts。同时它会通过环境变量把邮件目录路径、预览应用位置、工作目录、Resend API Key 与兼容性客户端列表透传给 Next 应用。热重载原理CLI 使用chokidar监视邮件目录配合socket.io向浏览器推送变更事件。变更会被去抖debounce150ms后批量发送并且只推送位于邮件目录内的文件变更对于被 import 的目录外依赖文件如共享组件、tailwind.config以及动态import()目标目录也会自动纳入监视范围。整个流程见 setup-hot-reloading.ts。email export将你的邮件模板批量渲染为纯 HTML 文件输出到一个out目录npx react-email exportexport子命令支持的参数定义见 index.ts参数说明默认值--outDir path输出目录out-p, --pretty美化pretty print输出 HTMLfalse-t, --plainText输出格式改为纯文本.txtfalse-d, --dir path邮件模板目录./emails-e, --extension extension自定义渲染产物的文件扩展名如blade.php依据--plainText取.txt/.html-s, --silent是否隐藏带进度信息的 spinnerfalse导出流程的源码级拆解见 commands/export.ts收集模板递归遍历邮件目录汇总所有.tsx模板文件getEmailTemplatesFromDirectory。构建使用 esbuild 将模板按每批 10 个的方式打包为 CommonJS.cjs模块并挂载两个自定义插件——inlineCssLoader负责把 CSS 内联进 HTMLrenderingUtilitiesExporter负责导出渲染所需的工具函数。渲染以每批 25 个的方式把.cjs文件送入 Nodeworker_threads工作线程在线程内调用react-email/render的render函数渲染为 HTML 字符串并写盘随后删除临时.cjs文件。使用独立 worker 是为了在渲染完成后释放 V8 隔离区避免内存泄漏。复制静态资源若邮件目录下存在static/文件夹会整体复制到输出目录的static/下保证邮件引用的图片等资源在导出后依然可访问。输出报告非--silent模式下结束时打印输出目录的文件树与Successfully exported emails提示。该流程有对应的端到端测试 export.spec.ts测试真实执行exportTemplates并断言out/vercel-invite-user.html的存在性与渲染快照可作为自定义模板导出行为的验证参考。email build与email start除文档中重点介绍的dev与export外CLI 还提供生产部署场景的组合email build # 把预览应用复制到项目根目录的 .react-email 并完成构建 email start # 运行 .react-email 中已构建的预览应用内部调用 npx next startstart命令会检查.react-email目录是否存在若缺失则提示先执行email build见 commands/start.ts。开发环境配置全局链接 CLI 源码文档明确指出日常反复npm installCLI 并为每次改动重新构建会带来大量摩擦。为避免这一问题仓库提供了一套脚本可将 CLI 的源码全局链接直接运行用法与标准 CLI 完全一致。这是维护者与高级用户迭代 CLI 本身时的推荐姿势。1. 全局链接react-emailpnpm link ./dev -g这里的./dev指向 packages/react-email/dev 目录其 package.json 声明了名为email-dev的二进制入口bin: index.js本质是一个指向 CLI 源码的薄封装。2. 运行 CLIemail-dev [command] [flags]链接成功后email-dev即可像标准email命令一样使用例如email-dev dev、email-dev export但执行的是源码路径改动源码后无需重新构建即可生效。若在 Windows 上使用pnpm link需要以管理员权限运行。小结React Email CLI 将写组件、看效果、出产物三个环节串成了一条完整链路初始化npx create-email一步生成带示例模板的emails工程开发email dev借助 esbuild、chokidar 与 socket.io 实现接近实时的预览刷新--dir/--port/--clients三个参数覆盖了绝大多数使用场景产出email export通过esbuild 批量打包 worker 线程渲染的高效流水线输出可直接投递的静态 HTML并自动内联 CSS、复制静态资源自举开发pnpm link ./dev -g让 CLI 的维护者能够直接以源码方式运行命令摆脱安装与重建的循环。如需进一步阅读可以深入 packages/react-email/src/cli 查看完整命令实现或参考 packages/create-email/readme.md 了解脚手架细节。本包遵循 MIT License可自由用于商业与非商业项目。【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 React Email CLI 实战指南：从模板初始化到本地预览与静态导出
React Email CLI 实战指南从模板初始化到本地预览与静态导出【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email本篇技术指南以 react-email 仓库中 packages/react-email/readme.md 为核心主体系统讲解 React Email CLI 的完整工作流用npx create-email初始化邮件模板工程、用email dev启动带热重载的本地预览服务器、用email export将 React 组件批量渲染为静态 HTML 文件以及如何在 monorepo 环境中全局链接 CLI 源码进行开发调试。读完本文你将掌握这套 CLI 的全部命令、参数与底层实现原理可直接上手搭建自己的邮件开发流水线。快速开始用 create-email 初始化邮件工程React Email 采用以 React 组件编写邮件的开发范式——邮件模板就是普通的.tsx文件编译后产出可在任意邮件客户端中渲染的 HTML。开始之前请确保本机满足运行时要求根据 packages/react-email/package.json 中的engines字段需要Node.js 20.0.0CLI 同样在启动时校验主版本号低于 20 会直接报错退出见 start-dev-server.ts。打开一个新的终端 shell运行npx create-email该命令会创建一个名为emails的新文件夹其中内置了若干可直接运行的邮件模板。对应的初始化逻辑位于 packages/create-email其中 tree.js 负责将 template/emails 目录下的模板文件含欢迎邮件等 4 个.tsx模板与配套静态图片复制到目标工程。初始化完成后emails目录结构大致如下emails/ ├── welcome.tsx # 可直接预览/导出的邮件模板 ├── ... # 其他内置示例模板 └── static/ # 邮件引用的静态资源图片等CLI 命令全景react-email包通过bin字段暴露email可执行命令见 packages/react-email/package.json其入口为 packages/react-email/src/cli/index.ts基于 commander 解析参数。该入口实际注册了 5 个子命令命令用途对应实现email dev启动带热重载的本地预览服务器commands/dev.tsemail build将预览应用复制到.react-email并构建commands/build.tsemail start运行.react-email中已构建的预览应用commands/start.tsemail export将全部模板渲染为静态 HTML 输出到out目录commands/export.tsemail resend setup / reset配置 / 清除与 Resend 账户的 API Key 集成commands/resend此外入口还做了一件不引人注意的事由于预览应用依赖 Node 的--experimental-vm-modules标志CLI 会在检测到缺少必要 flags 时用spawn重新拉起自身进程index.ts因此用户无需手动附加 Node 参数。email dev启动一个本地开发服务器监视你的文件变化并自动重新构建邮件修改即可在浏览器中即时看到效果npx react-email devdev子命令支持以下参数定义见 index.ts参数说明默认值-d, --dir path存放邮件模板的目录./emails-p, --port port开发服务器监听端口3000-c, --clients clients逗号分隔的邮件客户端列表用于展示兼容性警告会覆盖COMPATIBILITY_EMAIL_CLIENTS环境变量不传几点值得注意的行为细节目录不存在时直接报错退出dev命令首先检查--dir指向的文件夹是否存在缺失则打印Missing dir folder并以退出码 1 结束见 commands/dev.ts。端口自动递增当目标端口被占用时CLI 会打印警告并尝试port 1以此类推见 start-dev-server.ts。--clients参数严格校验仅接受 email-clients.ts 中定义的白名单客户端名传入未知客户端会抛出Unknown email client(s)错误见 index.ts。启动成功后会打印预览地址形如Running preview at: http://localhost:3000。从源码实现看预览服务器本身是一个包在 Nodehttp.Server中的 Next.js 应用next({ dev: false, ... })静态资源请求直接由 CLI 转发到邮件目录下的static/文件夹其余请求交给 Next 应用处理见 start-dev-server.ts。同时它会通过环境变量把邮件目录路径、预览应用位置、工作目录、Resend API Key 与兼容性客户端列表透传给 Next 应用。热重载原理CLI 使用chokidar监视邮件目录配合socket.io向浏览器推送变更事件。变更会被去抖debounce150ms后批量发送并且只推送位于邮件目录内的文件变更对于被 import 的目录外依赖文件如共享组件、tailwind.config以及动态import()目标目录也会自动纳入监视范围。整个流程见 setup-hot-reloading.ts。email export将你的邮件模板批量渲染为纯 HTML 文件输出到一个out目录npx react-email exportexport子命令支持的参数定义见 index.ts参数说明默认值--outDir path输出目录out-p, --pretty美化pretty print输出 HTMLfalse-t, --plainText输出格式改为纯文本.txtfalse-d, --dir path邮件模板目录./emails-e, --extension extension自定义渲染产物的文件扩展名如blade.php依据--plainText取.txt/.html-s, --silent是否隐藏带进度信息的 spinnerfalse导出流程的源码级拆解见 commands/export.ts收集模板递归遍历邮件目录汇总所有.tsx模板文件getEmailTemplatesFromDirectory。构建使用 esbuild 将模板按每批 10 个的方式打包为 CommonJS.cjs模块并挂载两个自定义插件——inlineCssLoader负责把 CSS 内联进 HTMLrenderingUtilitiesExporter负责导出渲染所需的工具函数。渲染以每批 25 个的方式把.cjs文件送入 Nodeworker_threads工作线程在线程内调用react-email/render的render函数渲染为 HTML 字符串并写盘随后删除临时.cjs文件。使用独立 worker 是为了在渲染完成后释放 V8 隔离区避免内存泄漏。复制静态资源若邮件目录下存在static/文件夹会整体复制到输出目录的static/下保证邮件引用的图片等资源在导出后依然可访问。输出报告非--silent模式下结束时打印输出目录的文件树与Successfully exported emails提示。该流程有对应的端到端测试 export.spec.ts测试真实执行exportTemplates并断言out/vercel-invite-user.html的存在性与渲染快照可作为自定义模板导出行为的验证参考。email build与email start除文档中重点介绍的dev与export外CLI 还提供生产部署场景的组合email build # 把预览应用复制到项目根目录的 .react-email 并完成构建 email start # 运行 .react-email 中已构建的预览应用内部调用 npx next startstart命令会检查.react-email目录是否存在若缺失则提示先执行email build见 commands/start.ts。开发环境配置全局链接 CLI 源码文档明确指出日常反复npm installCLI 并为每次改动重新构建会带来大量摩擦。为避免这一问题仓库提供了一套脚本可将 CLI 的源码全局链接直接运行用法与标准 CLI 完全一致。这是维护者与高级用户迭代 CLI 本身时的推荐姿势。1. 全局链接react-emailpnpm link ./dev -g这里的./dev指向 packages/react-email/dev 目录其 package.json 声明了名为email-dev的二进制入口bin: index.js本质是一个指向 CLI 源码的薄封装。2. 运行 CLIemail-dev [command] [flags]链接成功后email-dev即可像标准email命令一样使用例如email-dev dev、email-dev export但执行的是源码路径改动源码后无需重新构建即可生效。若在 Windows 上使用pnpm link需要以管理员权限运行。小结React Email CLI 将写组件、看效果、出产物三个环节串成了一条完整链路初始化npx create-email一步生成带示例模板的emails工程开发email dev借助 esbuild、chokidar 与 socket.io 实现接近实时的预览刷新--dir/--port/--clients三个参数覆盖了绝大多数使用场景产出email export通过esbuild 批量打包 worker 线程渲染的高效流水线输出可直接投递的静态 HTML并自动内联 CSS、复制静态资源自举开发pnpm link ./dev -g让 CLI 的维护者能够直接以源码方式运行命令摆脱安装与重建的循环。如需进一步阅读可以深入 packages/react-email/src/cli 查看完整命令实现或参考 packages/create-email/readme.md 了解脚手架细节。本包遵循 MIT License可自由用于商业与非商业项目。【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考