wl-squide
基于React Router和TanStack Query的模块化Web应用框架
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：wl-squide。 它的用途是：基于React Router和TanStack Query的模块化Web应用框架 完整的 Skill 内容见：https://321skill.com/skills/wl-squide/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在开发一个大型后台管理系统，想用微前端架构拆分成多个团队独立开发。请帮我基于wl-squide框架规划一下项目结构，并说明如何使用@squide/react-router来注册各个子模块的路由。” 它会为你提供模块拆分建议、核心代码示例，并解释如何利用wl-squide的API实现模块的动态注册和路由聚合。
介绍
wl-squide是一个用于构建模块化Web应用的框架，它基于React Router和TanStack Query，旨在解决微前端架构下应用模块化、路由管理和状态同步的复杂性。它提供了一套核心库和工具集，帮助开发者将大型单体应用拆分为独立开发、部署和运行的模块。
使用wl-squide，开发者可以通过其提供的核心包（如@squide/core、@squide/react-router）来定义和注册应用模块，管理模块间的路由和导航。它还集成了Mock Service Worker（MSW）、国际化（i18next）、环境变量管理等功能模块，并提供了与Firefly框架集成的专用包，以支持更完整的微前端开发工作流。
这个框架非常适合正在构建或重构大型、复杂前端应用，并希望采用微前端架构以提高团队独立性和开发效率的团队。它尤其适合那些技术栈以React为主，并希望有一套标准化方案来整合模块化、路由和数据查询的开发者。
建议在项目初期或重构阶段引入wl-squide，以便更好地规划模块边界。由于它深度依赖React Router和TanStack Query，团队需要对这些技术有一定了解。同时，建议参考其官方文档和示例项目来理解最佳实践。
核心特点
wl-squide的核心在于它并非一个孤立的微前端运行时，而是深度集成并扩展了React Router的路由系统，使得模块化应用的路由管理能够与React Router生态无缝衔接，同时提供了与TanStack Query集成的数据获取方案，确保了模块间状态的一致性和高效性。
注意事项
对于小型项目或技术栈非React的应用，引入此框架可能会带来不必要的复杂性。
常见问题
wl-squide和Module Federation是什么关系？
wl-squide通过@squide/firefly-module-federation等包提供了与Webpack Module Federation集成的支持，用于实现微前端模块的远程加载和运行时集成。
使用wl-squide需要先学习Firefly吗？
不一定。wl-squide的核心包（如core和react-router）可以独立使用。Firefly相关的包是用于与Workleap的Firefly框架深度集成，提供更完整的解决方案。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/wl-squide/raw/index.md 读取 wl-squide 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/wl-squide/raw/index.md（查看排版版本）