ARTICLE DETAIL

资讯详情

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

如何克隆 React Email 仓库并用 pnpm 与全局 link 搭建贡献者开发环境

如何克隆 React Email 仓库并用 pnpm 与全局 link 搭建贡献者开发环境 如何克隆 React Email 仓库并用 pnpm 与全局 link 搭建贡献者开发环境【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email这篇文章对应一个新贡献者的典型任务把 React Email 仓库拉到本地用 pnpm 装好所有依赖并通过pnpm link把email-devCLI 全局链接起来让命令行直接执行仓库里的 CLI 源码而不需要先构建。官方 Setup 指南要求 Node 18 或更高版本才能开始贡献开发下文的所有命令都以满足这个前提为准。准备环境Node 18 与 pnpmReact Email 仓库是一个 pnpm monorepo见 pnpm-workspace.yaml所以整个仓库的安装、测试、构建都必须用 pnpm 执行。如果你还没有 pnpm官方 Codebase overview给出的安装方式是npm install -g pnpm这个命令会把 pnpm 全局装到当前机器属于对环境的一次性修改如果你的机器由团队统一管理 npm 全局目录需要先确认有写入权限。仓库根目录的 package.json 声明了packageManager: pnpm11.0.0建议安装与之一致的 pnpm 版本避免 monorepo 内部行为出现差异。克隆仓库并安装依赖克隆仓库后进入仓库根目录git clone https://gitcode.com/GitHub_Trending/re/react-email cd react-email然后在仓库根目录安装全部工作区依赖pnpm install这一步会安装 monorepo 中所有包的依赖包括packages/*下的各个 npm 包、apps/*下的文档与 demo 应用以及playground。pnpm-workspace.yaml中还单独列出了packages/react-email/dev作为工作区成员——这正是下一步要链接的email-devCLI 包它的 package.json 声明了bin: index.js包名就是email-dev。全局 link email-dev CLI在仓库根目录执行pnpm link ./packages/react-email/dev -g官方 Setup 指南对这一步的解释是全局链接后你在任何目录执行email-dev命令时运行的是 CLI 的源码因此修改 CLI 代码后不需要重新构建 CLI 就能生效。这是贡献者开发环境与普通用户安装react-email包后的关键区别。验证开发环境是否可用Setup 指南本身没有给出单独的“环境自检”命令可以用官方开发工作流中的常规命令确认安装完整在任意包目录下运行一次测试pnpm test根目录的pnpm test会通过 turborepo 跑所有包的测试只在单个包内运行时则只跑该包的测试。测试框架是 vitest默认在happy-dom环境下执行见 Running tests 指南。测试全部通过说明依赖与测试环境都装好了。在仓库根目录检查 lintpnpm lintReact Email 用 biome 做 lint 和格式化且这两项由 CI 强制检查所以贡献前养成先跑 lint 的习惯见 Linting 指南。用 playground 做端到端检查可选如果你想确认修改组件时代码能实时生效可以走官方 Editing the components 指南给出的 playground 流程在playground/emails/下新建一个测试模板例如playground/emails/testing.tsx内容参考指南中的示例一个由Tailwind、Html、Head、Body、Text组成的简单模板。该目录的改动会被.gitignore忽略可以放心试验而不提交进仓库。运行 playground 服务器pnpm dev浏览器打开http://localhost:3000。能打开预览页面、并且修改组件源码后页面热更新就说明从依赖安装到email-dev运行整条链路都通了。限制与下一步文档贡献需要额外准备如果你要改文档需要按 Writing docs 指南执行文档基于 Mintlify在apps/docs下运行pnpm dev预览。发布前构建大多数包用 tsup 构建在对应包目录如packages/render内运行pnpm build即可react-email/tailwind是例外它用 vite 构建见 Building 指南。提交前必须执行 lint 与格式化pnpm lint/pnpm lint:fix否则 CI 会失败。遇到问题时官方建议先阅读 issue 规范再提交 issue参见 CONTRIBUTING 与 opening issues 指南。【免费下载链接】react-email Build and send emails using React项目地址: https://gitcode.com/GitHub_Trending/re/react-email创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表