coze-studio 前端模板实践Rsbuild React Web 项目初始化模板全面解析【免费下载链接】coze-studioAn AI agent development platform with all-in-one visual tools, simplifying agent creation, debugging, and deployment like never before. Coze your way to AI Agent creation.项目地址: https://gitcode.com/GitHub_Trending/co/coze-studio本篇技术指南以 coze-studio 仓库中common/_templates/rsbuild-web/README.md所描述的 Web 项目初始化模板为核心深入解析该模板内置的 React React Router、Slardar 监控、Less Module 与 Tailwind CSS、Vitest 测试五大能力并结合仓库源码还原每一处配置的真实作用与底层实现。读完本文你将掌握如何基于该模板快速搭建一个符合 coze-studio 工程规范的前端 Web 应用并理解 Rsbuild 构建链路与 Rush Monorepo 模板注入机制。一、模板定位从 README 出发common/_templates/rsbuild-web/README.md是 coze-studio 仓库中Rsbuild React App Web 项目初始化模板的说明文档原文清晰列出了模板已内置的能力清单react react-routerslardarless(module)、tailwindcssvitest也就是说这套模板并非一个空壳脚手架而是把构建、路由、样式、监控、测试五条工程链路一次性配齐的开箱即用项目基底。与仓库中其他模板component、node-core、rspack-web、solid-component相比rsbuild-web 面向的是React 生态的浏览器端 Web 应用构建工具采用字节跳动开源的 RsbuildRspack 驱动的高性能构建器并选用 React 18 与 React Router 6 作为运行时骨架。二、模板目录结构与职责划分在深入配置之前先梳理模板的完整目录结构位于 common/_templates/rsbuild-webrsbuild-web/ ├── config/ │ └── rush-project.json # Rush 构建缓存与产物目录声明 ├── src/ │ ├── assets/ # react.svg、rsbuild.png 等静态资源 │ ├── pages/ │ │ ├── main/ # 首页index.tsx index.module.less │ │ └── page1/ # 二级页面 │ ├── app.tsx # 应用骨架路由 监控初始化 │ ├── global.d.ts # 全局类型声明 │ ├── index.css # Tailwind 指令入口 │ └── index.tsx # React 挂载入口 ├── eslint.config.js # ESLint 扁平配置 ├── index.html # HTML 模板含 {{ packageName }} 占位符 ├── init.config.ts # rush-init-project-plugin 初始化配置 ├── package.json # 依赖与脚本 ├── rsbuild.config.ts # Rsbuild 构建配置 ├── tailwind.config.ts # Tailwind 扫描范围配置 ├── tsconfig.json # TypeScript 配置 ├── tsconfig.misc.json # 附加 TS 配置 └── vitest.config.ts # Vitest 测试配置可以看到模板将配置类文件构建、测试、Lint、TS与源码类文件入口、页面、样式清晰分层新项目从模板实例化后只需在src/pages下扩展页面即可。三、Rsbuild 构建配置plugin-react 与 Tailwind 注入模板的核心构建配置位于 rsbuild.config.ts全文如下import tailwindcss from tailwindcss; import { pluginReact } from rsbuild/plugin-react; import { defineConfig } from rsbuild/core; export default defineConfig({ plugins: [pluginReact()], html: { template: ./index.html, }, tools: { postcss(config) { config.postcssOptions?.plugins?.push(tailwindcss); }, }, });这段配置体现了 Rsbuild 的三个典型用法React 插件通过rsbuild/plugin-react自动完成 JSX 编译、React 刷新Fast Refresh等 React 开发体验配置无需手写 babel 或 swc 配置。HTML 模板html.template指向模板根目录的 index.html其中title{{ packageName }}/title是模板占位符在项目初始化时会被替换为实际包名详见第六节。PostCSS 扩展Rsbuild 的tools.postcss钩子允许开发者拿到内部 PostCSS 配置对象模板在此将tailwindcss插件追加进 plugins 数组实现 Tailwind 与 Rsbuild 的无缝集成。从依赖版本看package.json构建侧使用rsbuild/core ^0.2.18与rsbuild/plugin-react ^0.2.18配合postcss ^8.4.32、postcss-loader ^7.3.3、autoprefixer ^10.4.16构成完整的样式后处理链路。四、应用骨架路由、日志监控与挂载入口4.1 入口文件src/index.tsx 使用 React 18 的createRootAPI 挂载应用import { createRoot } from react-dom/client; import { App } from ./app; import ./index.css; const root createRoot(document.getElementById(root)); root.render(App /);对应的 DOM 容器定义在 index.html 的div idroot/div。4.2 路由与应用骨架src/app.tsx 是整个应用的骨架同时承载了路由与监控初始化两件事import { RouterProvider, createBrowserRouter } from react-router-dom; import slardar from slardar/web; import { reporter } from coze-arch/logger; import { Page1 } from ./pages/page1; import { MainPage } from ./pages/main; const router createBrowserRouter([ { path: /, children: [ { path: page1, element: Page1 / }, { path: , element: MainPage / }, { path: *, element: div404/div }, ], }, ]); export function App() { useEffect(() { reporter.info({ message: Ok fine }); reporter.init(slardar); }, []); return RouterProvider router{router} /; }React Router 6 数据路由采用createBrowserRouterRouterProvider的推荐写法根路径/下挂载三个子路由空路径渲染MainPage首页、page1渲染二级页面、*兜底 404。页面间通过Link组件跳转示例见 src/pages/main/index.tsx 中的Link topage1。Slardar 前端监控slardar/web是模板内置的监控 SDK配合仓库内的coze-arch/loggerworkspace 依赖声明于 package.json 的dependencies提供统一日志上报接口。骨架在组件挂载时先上报一条Ok fine探活日志再调用reporter.init(slardar)完成初始化这个模式可以直接复用到业务项目中作为监控接入的起点。4.3 页面示例首页 src/pages/main/index.tsx 展示了模板Less Module 与 Tailwind 混用的官方范式局部样式类通过import s from ./index.module.less引入并在 JSX 中写作className{s.container}对应 index.module.less 中的.container { padding-top: 36px; text-align: center; }布局与组件级样式直接使用 Tailwind 工具类例如flex items-center justify-center、bg-blue-500 rounded-md text-slate-50、animate-[spin_20s_linear_infinite]等首页同时引用了rsbuild.png与react.svg两张静态资源验证了 Rsbuild 对图片资源的默认处理能力。这种模块化 Less 管页面结构、Tailwind 管原子样式的组合正是模板在样式层面给出的推荐实践。五、样式体系Tailwind CSS 的接入方式5.1 全局指令入口src/index.css 声明了 Tailwind 的三条核心指令这是 Tailwind 生效的前提tailwind base; tailwind components; tailwind utilities; #root { width: 100%; height: 100%; }5.2 扫描范围配置tailwind.config.ts 使用satisfies Config做类型约束并将扫描范围限定在src目录下所有 JS/TS 与 JSX/TSX 文件import type { Config } from tailwindcss; export default { content: [./src/**/*.{js,jsx,ts,tsx}], } satisfies Config;注意这里不包含.html文件意味着模板约定 Tailwind 工具类只出现在源码文件中实际业务若在 HTML 模板中使用工具类需要按需扩展content数组。5.3 编译链路Tailwind 的编译不是独立的而是通过 Rsbuild 的 PostCSS 管道完成的——正如第三节所示rsbuild.config.ts 中tools.postcss将tailwindcss推入 PostCSS 插件列表。依赖侧由tailwindcss ~3.3.3、autoprefixer、postcss与postcss-loader共同支撑最终产出带厂商前缀的 CSS。六、测试与代码质量Vitest 与 ESLint6.1 Vitest 配置模板的测试方案基于 Vitestvitest.config.ts 非常精简因为它复用了仓库内部的统一配置包coze-arch/vitest-configimport { defineConfig } from coze-arch/vitest-config; export default defineConfig({ dirname: __dirname, preset: web, });preset: web表明该模板按 Web 环境jsdom 类预设运行测试与 node-core 等非 Web 模板形成区分。__tests__目录已预留配合 package.json 中的脚本即可直接跑测试test: vitest --run --passWithNoTests, test:cov: vitest --run --passWithNoTests --coverage--passWithNoTests保证新项目尚未编写用例时测试命令也不会报错退出。6.2 ESLint 与脚本速查模板的 npm scripts 覆盖了开发全流程命令作用npm run dev启动 Rsbuild 开发服务器HMRnpm run build执行rsbuild build生产构建npm run preview本地预览构建产物npm run lint执行eslint ./ --cache --quiet增量检查npm run test运行 Vitest 单测npm run test:cov运行单测并输出覆盖率Lint 侧由 workspace 内的coze-arch/eslint-config提供规则集测试侧由vitest/coverage-v8提供覆盖率支持package.json。依赖coze-arch/*系列全部使用workspace:*协议说明该模板强依赖 Rush Monorepo 的 workspace 解析这也是它作为仓库内部模板而非独立脚手架的定位体现。七、模板实例化机制占位符与初始化插件作为 coze-studio 的项目初始化模板rsbuild-web 通过 Rush 生态的rush-init-project-plugin完成实例化关键证据有两处7.1 HTML 中的占位符index.html 的title{{ packageName }}/title使用 Handlebars 风格占位符初始化时会被替换为新建项目的真实包名。7.2 初始化配置init.config.ts 是模板的初始化脚本import type { IConfig } from ../../autoinstallers/plugins/node_modules/rush-init-project-plugin; import SelectTeamPlugin from ../_plugins/SelectTeamPlugin; import SetDefaultAuthorPlugin from ../_plugins/SetDefaultAuthorPlugin; const config: IConfig { plugins: [new SetDefaultAuthorPlugin(), new SelectTeamPlugin()], defaultProjectConfiguration: { tags: [level-4], }, }; export default config;它向初始化流程注入了两个自定义插件定义于 common/_templates/_pluginsSetDefaultAuthorPlugin为新项目自动写入默认作者对应 package.json 中的author: {{ authorName }}占位SelectTeamPlugin交互式选择团队回填到包元数据。同时defaultProjectConfiguration.tags: [level-4]为新项目打上默认标签作为后续 Rush 权限与发布策略的输入。7.3 Rush 构建缓存声明config/rush-project.json 遵循 Rush v5 schema声明了build、test:cov、ts-check三个操作各自的产物目录output、coverage、dist这些声明是 Rush 构建缓存与增量执行的基础也间接说明了模板对 CI 场景的考虑。八、实战从模板创建并运行一个 Web 项目结合以上分析使用该模板落地一个 Web 项目的关键步骤如下仓库为只读这里仅说明查看与运行方式查看模板全貌阅读 README.md 与 package.json确认五大内置能力是否符合需求。实例化通过 Rush 的 init-project 能力由 init.config.ts 驱动创建新项目过程中完成{{ packageName }}、{{ description }}、{{ authorName }}等占位符替换。安装依赖在 Monorepo 根目录执行 rush 安装workspace:*依赖coze-arch/logger、coze-arch/vitest-config等会解析到仓库内部包。开发调试npm run dev启动 Rsbuild Dev Server首页src/pages/main/index.tsx会展示 Rsbuild React 双 Logo 与 HMR 提示文案修改源码即可验证热更新。扩展页面在 src/pages 下按main/page1的既有模式新增目录并在 src/app.tsx 的createBrowserRouter中注册路由。质量保障npm run lint做代码检查npm run test跑单测npm run build npm run preview验证生产构建产物。九、小结rsbuild-web 模板的价值在于它把 coze-studio 前端团队对一个合格 Web 项目应有的底座的共识固化成了可复制的模板资产Rsbuild 提供高性能构建与 HMRReact Router 6 提供声明式路由Less Module 与 Tailwind CSS 双轨并行的样式方案兼顾局部封装与原子化效率Slardar 与coze-arch/logger打通监控上报Vitest 配合统一测试预设保障质量基线最后通过rush-init-project-plugin与占位符机制完成一键实例化。对于希望在 coze-studio 工程体系内新建前端应用、或想借鉴其工程化组织方式的开发者这份模板连同本仓库的源码都是可直接查阅参考的第一手资料。【免费下载链接】coze-studioAn AI agent development platform with all-in-one visual tools, simplifying agent creation, debugging, and deployment like never before. Coze your way to AI Agent creation.项目地址: https://gitcode.com/GitHub_Trending/co/coze-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考