跨包复用实战sample-monorepo 中 sample/app 如何优雅消费内部组件库【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo当你把多个项目放进同一个仓库时跨包复用就成了 monorepo 架构的核心价值。sample-monorepo就是一个典型的演示项目它用 npm workspaces 串联起sample/components组件库、sample/app应用和sample/server服务端三个包其中sample/app直接消费内部组件库还顺带演示了服务端渲染SSR。本文带你零基础看懂这套monorepo 跨包复用的完整链路并给出可直接照抄的配置方法。为什么需要跨包复用先看懂 monorepo 整体架构传统多仓库模式下组件库和应用分属不同仓库版本升级、联调、发版都是灾难。monorepo 把一切都放在packages/目录下实现一处改动、处处生效。sample-monorepo 的项目结构非常清晰包名作用关键文件sample/componentsReact 组件库packages/components/src/main.tsxsample/appReact 应用消费组件库packages/app/src/app.tsxsample/serverExpress 服务端SSR 渲染应用packages/server/src/http-server.tsx根目录的 package.json 通过workspaces: [packages/*]声明工作区npm 会自动把这些包软链接进根node_modules让它们之间可以像普通依赖一样互相引用。跨包复用由此成为可能。内部组件库如何暴露接口sample/components 的导出设计跨包复用的第一步是让组件库把接口露出来。sample/components的做法非常简洁packages/components/src/main.tsx 定义了Main组件接收text字符串并渲染成main标签packages/components/src/index.ts 通过export * from ./main.js统一收口导出。同时它的 package.json 里用exports字段声明了入口./dist/index.js保证打包后依然能被正确解析。组件库的职责就是只导出、不运行这也是 monorepo 跨包复用的最佳实践。sample/app 消费组件库的三步配置最快上手方法从应用侧看消费一个内部包只需要三步缺一不可。第一步声明依赖关系在 packages/app/package.json 的dependencies中写入sample/components: ^1.0.0。注意这里的版本号不需要刻意改npm workspaces 会自动把它解析为工作区内的本地包而不是去 npm 仓库下载。第二步配置 TypeScript project references为了让 TypeScript 感知跨包引用并实现增量编译在 packages/app/src/tsconfig.json 中加入references: [{ path: ../../components/src }]配合根目录 tsconfig.json 的 solution 式引用同时引用 app、components、server 三个子项目以及 tsconfig.base.json 里开启的composite: true一条npm run build即tsc --build就能按依赖顺序自动构建全部包。第三步源码中直接导入在 packages/app/src/app.tsx 里代码只有三行核心逻辑import { Main } from sample/components; export const App: React.FCAppProps ({ text }) Main text{text} /;注意App并没有重新实现 UI而是直接把text透传给组件库的Main。这就是跨包复用的精髓应用只负责编排细节全在组件库。跨包复用的完整调用链路从源码到 SSR 渲染光看懂单点配置还不够我们沿着调用链走一遍你会发现 sample-monorepo 把跨包复用玩到了极致packages/app/src/client-main.tsx 作为浏览器入口用createRoot/hydrateRoot渲染AppApp内部调用组件库的Main完成首屏 UIpackages/server/src/http-server.tsx 又反向依赖sample/app用ReactDOMServer.renderToString(App textHello World (SSR) /)在服务端生成 HTML实现服务端渲染。一条依赖链清晰可见server → app → components。每个包都只依赖它下面一层的包循环依赖和重复代码被彻底杜绝。常见踩坑与排查技巧跨包引用报错怎么办初学者在 monorepo 跨包复用中常遇到两个问题这里直接给出排查思路找不到模块sample/components大概率是没执行npm i或新增包后没重新安装。回到根目录重新执行npm i即可。类型报错或构建顺序混乱检查子项目tsconfig.json是否正确配置了references以及根tsconfig.json是否引用了对应路径。tsc --build会按引用关系自动排序配置正确后无需手动逐个编译。快速上手一行命令跑通跨包复用示例想亲手体验这套跨包复用流程先克隆仓库git clone https://gitcode.com/gh_mirrors/sa/sample-monorepo然后在根目录依次执行npm i # 安装并链接所有 workspace 包 npm run build # tsc --build 按依赖顺序构建全部包 npm start # 浏览器访问客户端渲染 npm run start:server # 服务端渲染SSR启动后访问http://localhost:3000和http://localhost:3000/server就能直观对比客户端渲染与 SSR 的差异。总结跨包复用的最佳实践要点回到最初的问题——sample/app如何优雅消费内部组件库答案就藏在三个关键词里workspaces 自动链接、TypeScript project references 声明依赖、按层依赖避免循环。sample-monorepo 用不到几百行代码就把 monorepo 跨包复用的核心思想讲透了。无论你是想搭组件库、微前端还是全栈应用这套模式都值得直接借鉴。【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
跨包复用实战：sample-monorepo 中 @sample/app 如何优雅消费内部组件库
跨包复用实战sample-monorepo 中 sample/app 如何优雅消费内部组件库【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo当你把多个项目放进同一个仓库时跨包复用就成了 monorepo 架构的核心价值。sample-monorepo就是一个典型的演示项目它用 npm workspaces 串联起sample/components组件库、sample/app应用和sample/server服务端三个包其中sample/app直接消费内部组件库还顺带演示了服务端渲染SSR。本文带你零基础看懂这套monorepo 跨包复用的完整链路并给出可直接照抄的配置方法。为什么需要跨包复用先看懂 monorepo 整体架构传统多仓库模式下组件库和应用分属不同仓库版本升级、联调、发版都是灾难。monorepo 把一切都放在packages/目录下实现一处改动、处处生效。sample-monorepo 的项目结构非常清晰包名作用关键文件sample/componentsReact 组件库packages/components/src/main.tsxsample/appReact 应用消费组件库packages/app/src/app.tsxsample/serverExpress 服务端SSR 渲染应用packages/server/src/http-server.tsx根目录的 package.json 通过workspaces: [packages/*]声明工作区npm 会自动把这些包软链接进根node_modules让它们之间可以像普通依赖一样互相引用。跨包复用由此成为可能。内部组件库如何暴露接口sample/components 的导出设计跨包复用的第一步是让组件库把接口露出来。sample/components的做法非常简洁packages/components/src/main.tsx 定义了Main组件接收text字符串并渲染成main标签packages/components/src/index.ts 通过export * from ./main.js统一收口导出。同时它的 package.json 里用exports字段声明了入口./dist/index.js保证打包后依然能被正确解析。组件库的职责就是只导出、不运行这也是 monorepo 跨包复用的最佳实践。sample/app 消费组件库的三步配置最快上手方法从应用侧看消费一个内部包只需要三步缺一不可。第一步声明依赖关系在 packages/app/package.json 的dependencies中写入sample/components: ^1.0.0。注意这里的版本号不需要刻意改npm workspaces 会自动把它解析为工作区内的本地包而不是去 npm 仓库下载。第二步配置 TypeScript project references为了让 TypeScript 感知跨包引用并实现增量编译在 packages/app/src/tsconfig.json 中加入references: [{ path: ../../components/src }]配合根目录 tsconfig.json 的 solution 式引用同时引用 app、components、server 三个子项目以及 tsconfig.base.json 里开启的composite: true一条npm run build即tsc --build就能按依赖顺序自动构建全部包。第三步源码中直接导入在 packages/app/src/app.tsx 里代码只有三行核心逻辑import { Main } from sample/components; export const App: React.FCAppProps ({ text }) Main text{text} /;注意App并没有重新实现 UI而是直接把text透传给组件库的Main。这就是跨包复用的精髓应用只负责编排细节全在组件库。跨包复用的完整调用链路从源码到 SSR 渲染光看懂单点配置还不够我们沿着调用链走一遍你会发现 sample-monorepo 把跨包复用玩到了极致packages/app/src/client-main.tsx 作为浏览器入口用createRoot/hydrateRoot渲染AppApp内部调用组件库的Main完成首屏 UIpackages/server/src/http-server.tsx 又反向依赖sample/app用ReactDOMServer.renderToString(App textHello World (SSR) /)在服务端生成 HTML实现服务端渲染。一条依赖链清晰可见server → app → components。每个包都只依赖它下面一层的包循环依赖和重复代码被彻底杜绝。常见踩坑与排查技巧跨包引用报错怎么办初学者在 monorepo 跨包复用中常遇到两个问题这里直接给出排查思路找不到模块sample/components大概率是没执行npm i或新增包后没重新安装。回到根目录重新执行npm i即可。类型报错或构建顺序混乱检查子项目tsconfig.json是否正确配置了references以及根tsconfig.json是否引用了对应路径。tsc --build会按引用关系自动排序配置正确后无需手动逐个编译。快速上手一行命令跑通跨包复用示例想亲手体验这套跨包复用流程先克隆仓库git clone https://gitcode.com/gh_mirrors/sa/sample-monorepo然后在根目录依次执行npm i # 安装并链接所有 workspace 包 npm run build # tsc --build 按依赖顺序构建全部包 npm start # 浏览器访问客户端渲染 npm run start:server # 服务端渲染SSR启动后访问http://localhost:3000和http://localhost:3000/server就能直观对比客户端渲染与 SSR 的差异。总结跨包复用的最佳实践要点回到最初的问题——sample/app如何优雅消费内部组件库答案就藏在三个关键词里workspaces 自动链接、TypeScript project references 声明依赖、按层依赖避免循环。sample-monorepo 用不到几百行代码就把 monorepo 跨包复用的核心思想讲透了。无论你是想搭组件库、微前端还是全栈应用这套模式都值得直接借鉴。【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
