ARTICLE DETAIL

资讯详情

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

Ripple Community Wallet开发者指南:pnpm Monorepo工作区架构与@rc共享包设计

Ripple Community Wallet开发者指南:pnpm Monorepo工作区架构与@rc共享包设计 Ripple Community Wallet开发者指南pnpm Monorepo工作区架构与rc共享包设计【免费下载链接】XRP-community-walletFully decentralized and the most secure XRP EVM wallet - built by the community, for the community.项目地址: https://gitcode.com/gh_mirrors/xr/XRP-community-walletRipple Community Wallet 是一款面向 XRP 生态与 EVM 网络的开源非托管钱包其代码仓库采用 pnpm Monorepo 工作区架构通过一组rc前缀的共享包types、ui、i18n、api-client、config统一管理类型、组件、多语言文案与构建配置。本文带你快速读懂这套 Monorepo 的目录布局、共享包职责与本地开发流程帮助你以最低成本上手贡献代码 一、为什么选择 pnpm Monorepo 工作区钱包应用本身只是仓库中的一个应用大量通用能力被下沉到共享包中供多个应用复用。整个仓库只有两个工作区目录定义在 pnpm-workspace.yamlpackages: - apps/* - packages/*这种划分带来三个直接好处依赖共享所有包共用一份锁文件pnpm-lock.yaml版本一致、磁盘占用小一处修改处处生效修改rc/ui里的按钮样式钱包应用立即生效无需发版职责清晰apps/放可独立运行的应用packages/放纯逻辑与公共资源边界一目了然。根目录的 package.json 把日常命令收敛成一条命令管全部命令作用说明pnpm dev启动钱包开发服务器等价于pnpm --filter rc/wallet devpnpm build全量构建先构建packages/*再构建apps/*顺序有保证pnpm typecheck全仓类型检查pnpm -r typecheck递归执行pnpm test全仓单元测试基于 Vitest另外根package.json中用pnpm.overrides锁定了qs、lodash、uuid等高频依赖的版本避免子包之间出现依赖漂移引发的安全与兼容问题。二、六大共享包各自负责什么packages/下共有 5 个共享包加上应用本身rc/wallet构成完整生态包名目录职责rc/typespackages/types/后端数据 Schemazod 校验 数字/地址/日期格式化函数rc/uipackages/ui/30 个 React UI 组件与 CSS 设计令牌tokens.cssrc/i18npackages/i18n/11 种语言的翻译 JSON 与加载逻辑rc/api-clientpackages/api-client/HTTP 客户端、接口类型与 mock 适配器rc/configpackages/config/共享 tsconfig 基线与 Tailwind 预设rc/walletapps/wallet/钱包应用本体React Vite包之间的依赖关系非常简单rc/api-client依赖rc/types而rc/wallet依赖上面所有包。每个包在package.json中都通过workspace:*声明工作区内依赖例如 apps/wallet/package.json 中的rc/types、rc/ui等保证永远使用本地版本而不是 npm 上的旧版本。三、rc/config一套配置管全仓的隐形基石rc/config是最容易被忽略、却最有价值的包它把两类配置标准化了1. 统一的 TypeScript 基线packages/config/tsconfig/base.json 为所有子包规定了同一套编译标准ES2022目标、Bundler模块解析、以及strict、noUncheckedIndexedAccess、noImplicitOverride等严格开关。react.json 在此基础上补充了 DOM 库与react-jsx转换。钱包应用的 apps/wallet/tsconfig.json 只需一行继承再补充~/*路径别名即可完成配置extends: rc/config/tsconfig/react.json2. 共享的 Tailwind 设计令牌tailwind-preset.cjs 把品牌色、中性色、圆角、阴影、字号、z-index 等全部映射为 CSS 变量如--rc-brand-500。配合rc/ui的 tokens.css深色主题只需切换data-theme属性即可全局生效——这是配置即主题的典型设计。四、source-only 包免构建的共享包设计打开任一共享包的 package.json 会注意到一个关键细节main: ./src/index.ts, exports: { .: ./src/index.ts, ./schemas: ./src/schemas/index.ts }共享包直接以TypeScript 源码作为入口build脚本只是一句echo source-only, no build。原理是钱包应用由 Vite 构建能直接编译.ts源码因此共享包无需先产出dist。这套设计的好处是✅ 编辑共享包后热更新即时生效省去改包 → 构建包 → 应用刷新的循环✅exports细分入口如rc/types/schemas支持按需导入缩小打包体积✅ 根目录pnpm build中packages/*先于apps/*执行为将来切换为独立构建留了兼容余地。rc/ui还额外导出了./tokens.css与./fonts.css两个样式入口让应用可以把设计令牌当作资源引用而不是代码。五、本地开发三步走快速启动钱包环境要求Node.js ≥ 20、pnpm ≥ 9见 package.json 的engines声明。克隆并安装依赖git clone https://gitcode.com/gh_mirrors/xr/XRP-community-wallet进入仓库根目录执行pnpm install启动开发服务器pnpm dev浏览器访问http://localhost:5173端口定义于 vite.config.ts跑测试与类型检查pnpm test、pnpm typecheck确认改动没有破坏任何包。 提示由于rc/*包是工作区依赖请务必在仓库根目录执行命令不要单独进入apps/wallet安装依赖。六、总结这套架构值得借鉴的三个点Ripple Community Wallet 的 Monorepo 架构并不复杂但每一处设计都指向多应用、多语言、多主题的长期演进apps/*packages/*双区划分用一份 pnpm-workspace.yaml 声明边界source-only 共享包main指向.ts源码Vite 直接编译开发体验接近单仓配置下沉到rc/configtsconfig 与 Tailwind 预设集中管理新增应用只需继承一份基线。理解了这套结构你就可以在 packages/ui/ 里打磨组件、在 packages/i18n/ 中补充语言文案、在 apps/wallet/src/features/ 中扩展功能模块而不会互相踩坑。这正是社区型钱包项目吸引贡献者的底层保障 【免费下载链接】XRP-community-walletFully decentralized and the most secure XRP EVM wallet - built by the community, for the community.项目地址: https://gitcode.com/gh_mirrors/xr/XRP-community-wallet创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表