CMS后端前端【免费下载链接】webiny-jsOpen-source, self-hosted CMS platform on AWS serverless (Lambda, DynamoDB, S3). TypeScript framework with multi-tenancy, lifecycle hooks, GraphQL API, and AI-assisted development via MCP server. Built for developers at large organizations.项目地址https://gitcode.com/gh_mirrors/we/webiny-js点击查看免费下载Webiny 是一个基于 AWS ServerlessLambda、DynamoDB、S3构建的开源自托管 CMS 平台其管理端与应用端由大量 React 包组成。本文以仓库内 dependencies/react.md 这份依赖审计清单为骨架逐项解读每个 React 相关依赖的现状Status: ok / replace / reduce、被替代原因与推荐替代方案并结合packages/*中各包的package.json与核心源码验证实际使用情况。读完本文你将获得一份可直接指导依赖瘦身、技术栈现代化与迁移排期的实战清单。一、审计背景React 18.3.1 与替代还是保留的决策框架这份文档本质上是一份依赖健康度审计表目标是在不破坏现有功能的前提下逐步清理长期无人维护unmaintained的 React 生态依赖同时优先复用仓库中已经在依赖里的现代替代品最终达到降低包体积、减少运行时开销、降低维护风险的效果。审计状态分为三档状态含义处理策略ok依赖健康、仍在维护或与现有架构深度绑定保留暂不动作replace依赖长期失维护或与现有技术栈重叠冗余制定迁移计划替换为现代替代方案reduce功能与现有依赖重叠可能冗余评估后缩减或移除从根目录 package.json 可以看到整个 monorepo 通过resolutions强制锁定了react、react-dom为18.3.1types/react为18.3.31、types/react-dom为18.3.7与文档所述 Currently 18.3.1 完全一致React 19 已发布文档将其标记为待迁移React 19 is available when ready to migrate。二、核心运行时react / react-dom —— 现状 OKReact 19 迁移窗口已打开## react, react-dom Status: ok Currently 18.3.1. React 19 is available when ready to migrate.结论保留但需要规划 React 19 升级。全仓库各前端包如 packages/app-admin/package.json、packages/admin-ui/package.json均声明react: 18.3.1、react-dom: 18.3.1根resolutions亦将其固定保证所有 workspace 包共享同一 React 版本。React 19 的核心变化包括ref作为普通 prop 传递、Context直接作为 Provider、删除forwardRef的强制要求等。迁移前需重点审计仓库内对forwardRef、ReactDOM.render等旧 API 的使用以及第三方依赖如react-transition-group、react-virtualized的 React 19 兼容性——这恰是下文replace清单要优先解决的问题。迁移建议先完成本文第三部分的replace替换再升级 React 19可最大程度降低一次性迁移风险。三、需替换replace的依赖失维护包与现代化替代方案3.1 react-helmet → react-helmet-async文档管理Status: replace Unmaintained since 2020. Use react-helmet-async (drop-in, maintained).react-helmet自 2020 年起停止维护而仓库中仍有多处直接使用packages/app-admin/package.json、packages/app-workflows/package.json、packages/app-admin-ui/package.json、packages/app-headless-cms/package.json、packages/app-website-builder-workflows/package.json等均声明了react-helmet: ^6.1.0。替代方案react-helmet-async是官方推荐的 drop-in 替代API 几乎一致Helmet组件并额外支持并发渲染场景如 React 18 的流式渲染与 SSR下的文档管理安全。迁移时可保留现有Helmet用法仅将 import 路径从react-helmet改为react-helmet-async。3.2 react-color → react-colorful颜色选择器Status: replace Unmaintained since 2020. Use react-colorful (smaller, maintained, hooks-based).react-color同样自 2020 年失维护仓库中 packages/admin-ui/package.json 声明了react-color: ^2.19.3以及types/react-color: ^3.0.13典型使用场景是管理后台中的颜色选择控件。react-colorful的优势体积远小于react-color约 2KB vs 数十 KB含样式零依赖基于 hooksAPI 更现代HexColorPicker color{...} onChange{...}持续维护TypeScript 原生支持可移除types/react-color这个额外的类型包。3.3 react-custom-scrollbars → radix-ui/react-scroll-area 或原生 CSS滚动区域Status: replace Unmaintained since 2017. Use radix-ui/react-scroll-area (already in deps!) or CSS overflow: auto with scrollbar-gutter: stable.react-custom-scrollbars自 2017 年就停止维护仓库中 packages/admin-ui/package.json 声明了react-custom-scrollbars: ^4.2.1和types/react-custom-scrollbars。值得注意文档特意强调radix-ui/react-scroll-area已经在依赖里admin-ui 的package.json中确认存在radix-ui/react-scroll-area: ^1.2.18所以这是零新增依赖的迁移。Radix 的ScrollArea提供无障碍WAI-ARIA支持、可自定义滚动条样式是复杂 UI 场景的首选。对简单场景文档也给出了零依赖方案直接用 CSSoverflow: auto配合scrollbar-gutter: stable为滚动条预留空间避免内容布局抖动。3.4 react-butterfiles → react-dropzone文件拖拽上传Status: ok Alternative: react-dropzone is more widely maintained.react-butterfiles当前状态为ok仍可用但文档指出更广泛维护的替代品是react-dropzone。这意味着迁移优先级低于前几个replace项可以在未来版本中择机替换。3.5 react-dnd 全家桶 → dnd-kit/core dnd-kit/sortable拖拽Status: replace Use dnd-kit/core dnd-kit/sortable. More modern, better maintained, hooks-based.react-dnd生态react-dnd、react-dnd-html5-backend、dnd-core是经典的拖拽方案但 API 较重、依赖 HTML5 后端代理维护节奏缓慢。仓库中 packages/admin-ui/package.json 声明了react-dnd: ^16.0.1packages/app-headless-cms/package.json 与 packages/app-website-builder/package.json 则声明了react-dndreact-dnd-html5-backend主要服务于内容模型字段排序、页面元素拖拽等场景。dnd-kit的优势完全 hooks 化useDndContext、useSortable与 React 18 心智模型一致内置sortable预设拖拽排序开箱即用更小的包体积与更活跃的维护。3.6 minoru/react-dnd-treeview树拖拽→ dnd-kit 树方案Status: replace Depends on react-dnd. If migrating to dnd-kit, replace this too. Consider dnd-kit/core with tree utilities.minoru/react-dnd-treeview依赖react-dnd因此必须与 react-dnd 迁移捆绑进行。从源码看admin-ui 的 Tree 组件是它的主要消费方packages/admin-ui/src/Tree/Tree.tsx 与 packages/admin-ui/src/Tree/useTree.ts 中直接 import 了minoru/react-dnd-treeview的类型如DropOptions、NodeModelpackages/admin-ui/package.json 声明版本为^3.5.4。迁移到dnd-kit时树结构嵌套拖放需要借助dnd-kit/core的DragOverlay与自定义碰撞检测算法来模拟层级折叠、兄弟节点插入等语义属于迁移清单中工作量最大的一项建议单独排期并配套编写测试。3.7 react-lazy-load → 原生 IntersectionObserver懒加载Status: replace Use native IntersectionObserver API with a small hook.文档直接给出了一个可复制的 hooks 实现用于替代react-lazy-loadfunction useLazyLoad(ref: RefObjectElement) { const [visible, setVisible] useState(false); useEffect(() { const obs new IntersectionObserver(([e]) e.isIntersecting setVisible(true)); if (ref.current) obs.observe(ref.current); return () obs.disconnect(); }, []); return visible; }IntersectionObserver已是所有现代浏览器原生支持的 API该方案的优势是零依赖、无额外包体积且行为可预期进入视口时置为可见disconnect清理监听避免内存泄漏。使用时将ref绑定到目标 DOM 节点用返回的visible控制图片/组件的渲染时机。3.8 react-transition-group → CSS 过渡 / framer-motion动画Status: replace Use CSS transitions/animations directly or framer-motion for complex cases.react-transition-group提供CSSTransition、TransitionGroup等声明式过渡 API但需要手动维护 enter/exit 的 CSS 类名状态机。仓库中 packages/app-admin/package.json 仍声明了react-transition-group: ^4.4.5。文档建议简单进出场动画直接用 CSStransition/keyframes完成复杂编排拖拽跟手、布局动画、页面切换则引入framer-motion其 hooks 化 APIuseAnimation、AnimatePresence与 JSX 声明式motion.div能显著降低动画复杂度。3.9 react-virtualized → tanstack/react-virtual虚拟列表Status: replace Use tanstack/react-virtual (lighter, maintained, hooks-based). tanstack/react-table is already in deps.react-virtualized是虚拟滚动领域的老牌库但体积庞大、维护停滞。仓库中 packages/admin-ui/package.json 声明了react-virtualized: ^9.22.6与types/react-virtualized: ^9.22.3。文档的推荐极具说服力tanstack/react-table已经在依赖里admin-ui 声明tanstack/react-table: ^9.1.2而同一生态的tanstack/react-virtual是轻量、hooks 化的虚拟滚动方案两者配合可统一表格与列表的虚拟化方案。迁移时需注意 API 差异react-virtualized的List/AutoSizer需替换为useVirtualizerhook measureElement动态测量。3.10 apollo/react-common / apollo/react-hooks / apollo/react-components → apollo/client v3GraphQLStatus: replace Apollo v2 React bindings. Replace with apollo/client v3 (single package includes all React hooks).这三者是 Apollo Client v2 时代拆分的 React 绑定包。Apollo Client v3 起已将其合并进单一apollo/client包内置useQuery、useMutation、useSubscription、Query/Mutation组件等全部 React API。迁移时直接替换 import 来源即可v3 的client初始化方式new ApolloClient({ cache: new InMemoryCache(), link })与缓存策略也更为现代。3.11 prop-types → 直接移除类型安全Status: replace TypeScript is already used. prop-types is runtime overhead with no value when types are checked at compile time. Remove.这是最干脆的一项项目已全面使用 TypeScript全仓库.ts/.tsx源码编译期类型检查已经覆盖prop-types的运行时校验职责。继续保留prop-types只会增加运行时开销每次渲染都执行校验逻辑。文档结论是直接删除。四、保留ok的依赖与架构深度绑定的现代化栈以下依赖审计状态均为ok且大多已在仓库各包中核实存在短期无需动作依赖仓库证据备注emotion/react/emotion/styled/emotion/csspackages/app-admin/package.json11.14.0/11.14.1/11.13.5主样式方案见下文 4.1lexical/react根 package.json^0.49.0Lexical 富文本编辑器官方 React 绑定monaco-editor/reactpackages/admin-ui/package.json^4.7.0Monaco 编辑器封装radix-ui/react-scroll-areapackages/admin-ui/package.json^1.2.18见 3.3同时是替代候选tanstack/react-tablepackages/admin-ui/package.json^9.1.2见 3.9testing-library/react/testing-library/user-eventpackages/app-admin/package.json^16.3.2组件测试体系fortawesome/react-fontawesomepackages/admin-ui/package.json^3.5.0图标体系Storybook 全家桶storybook、storybook/react-webpack5、addon-a11y、addon-docs、addon-webpack5-compiler-babeladmin-ui 构建脚本webiny-admin-build-storybook组件开发/文档环境radix-uipackages/app-website-builder/package.json^1.6.7聚合入口包sonnerpackages/admin-ui/package.json^2.0.8Toast 通知cmdkpackages/admin-ui/package.json^1.1.1命令面板与 packages/command-palette 类场景配套mobx-react-litepackages/app-admin/package.json^5.0.3状态管理admin-ui Tree 组件中useTree亦使用autorunuse-deep-compare-effectpackages/app-headless-cms/package.json^1.8.1深比较副作用is-hotkeypackages/app-admin/package.json^0.2.0快捷键匹配Lexical 编辑器联动timeago-react管理端时间显示相对时间格式化markdown-to-jsxpackages/app-admin/package.json^9.10.2Markdown 渲染class-variance-authoritypackages/admin-ui/package.json^0.7.1变体式样式组合与 Tailwind 搭配tw-animate-csspackages/admin-ui/package.json^1.4.0Tailwind 动画类csstype类型层依赖CSS 类型定义react-refresh构建链Fast Refresh 支撑react-resizable-panelspackages/app-admin/package.json^4.12.3可拖拽分栏面板4.1 样式方案并存Emotion Tailwind以及 Babel → SWC 的构建链变化文档对emotion/*保留的同时给出了一条长期优化线索Note: Tailwind CSS is also in deps. Long-term, consolidating to one styling approach reduces bundle. emotion/babel-plugin has been removed — the SWC equivalent (swc/plugin-emotion in build-tools) is used instead.仓库中 Tailwind 已全面引入admin-ui 声明tailwindcss: ^4.3.3、tailwind-merge: ^3.6.0、tailwindcss/postcss并构建时将tailwindcss、tw-animate-css列入产出清单。这意味着Emotion 运行时样式 Tailwind 静态工具类两套体系并存长期来看向单一方案收敛可以减小产物体积。关键构建细节Emotion 的编译期优化插件已从 Babel 生态切换到 SWC 生态——packages/build-tools/package.json 中声明了swc/plugin-emotion: ^15.0.0。也就是说项目中 Emotion 的css/styled编译时转换由 SWC 插件完成这与仓库整体使用 SWC/oxc 加速构建链build脚本基于tsx scripts/buildPackages的方向一致。迁移或升级 Emotion 时务必确保swc/plugin-emotion版本与 SWC 编译器版本兼容。五、需缩减reduce的依赖reset-css 与 Tailwind preflight 的重叠Status: reduce Tailwind CSS (already in deps) includes a CSS reset via preflight. May be redundant.reset-csspackages/app-admin/package.json 中声明^5.0.2提供全局 CSS 重置。但 Tailwind CSS 内置的preflight基于现代-normalize 的基线重置已经在依赖中生效二者功能高度重叠。文档建议评估后移除reset-css仅保留 Tailwind preflight 一份重置逻辑进一步压缩全局 CSS 体积。移除时需回归测试表单控件、按钮、列表等基础元素的默认样式确认无样式回退。六、落地清单把审计变成可执行的迁移计划基于文档与仓库实况整理为分优先级的执行清单P0收益最大、工作量可控prop-types直接移除——纯减法零功能影响。react-helmet→react-helmet-async——drop-in 替换改动集中在 5 个 app 包的 import。react-custom-scrollbars→radix-ui/react-scroll-area——依赖已在库内无需新增包。P1需要组件级改造4.react-color→react-colorful——API 重写受控颜色值 onChange移除types/react-color。 5.react-lazy-load→ 内置useLazyLoadhook文中有完整实现。 6.react-transition-group→ CSS 过渡或framer-motion。 7.react-virtualized→tanstack/react-virtual与既有tanstack/react-table统一生态。P2工作量最大、需单独排期8.react-dnd/minoru/react-dnd-treeview→dnd-kit/corednd-kit/sortable——涉及 admin-ui 的Tree组件useTree.ts与 headless CMS 的字段排序建议配套拖拽相关测试。 9.apollo/react-*→apollo/clientv3——同步升级 Apollo 数据层。长期观察10.react-butterfiles→react-dropzone当前ok择机替换。 11.reset-css移除依赖 Tailwind preflight。 12. React 18.3.1 → React 19建议在 1–11 完成后启动。七、总结dependencies/react.md本质上是一份依赖健康度路线图它以ok / replace / reduce三档状态清晰划定了 React 生态的保留区、替换区与缩减区。替换区的共同特征是失维护react-helmet、react-color、react-custom-scrollbars、react-dnd或与现有技术栈重叠react-virtualized vs tanstack、react-transition-group vs CSS/framer-motion而替代方案几乎都优先指向仓库中已存在的依赖radix-ui/react-scroll-area、tanstack/react-table、Tailwind或原生 APIIntersectionObserver、CSS transitions这保证了迁移过程少引入、多复用。结合各包package.json与Tree等组件的源码实据这份清单完全可以作为后续每一次依赖升级 PR 的评审基准与验收标准。赞分享CMS后端前端【免费下载链接】webiny-jsOpen-source, self-hosted CMS platform on AWS serverless (Lambda, DynamoDB, S3). TypeScript framework with multi-tenancy, lifecycle hooks, GraphQL API, and AI-assisted development via MCP server. Built for developers at large organizations.项目地址https://gitcode.com/gh_mirrors/we/webiny-js点击查看免费下载相关推荐open-source-course代码审查指南提升开源代码质量的7个技巧open source course代码审查指南提升开源代码质量的7个技巧 开源项目协作中代码审查是确保代码质量和项目可持续发展的关键环节。无论您是开源新手CMS后端前端Dependencies现代化的Windows依赖性查看器Dependencies现代化的Windows依赖性查看器 Dependencies 是一个开源的现代版 Dependency Walker 专为Windo开发工具桌面应用逆向工程解决Windows DLL依赖问题的现代工具Dependencies完全指南解决Windows DLL依赖问题的现代工具Dependencies完全指南 在Windows开发的日常工作中我们经常会遇到找不到指定模块或DLL加载开发工具桌面应用逆向工程上一篇Dassl.pytorch完全指南一站式掌握领域自适应与半监督学习的终极工具下一篇PyTorch tutorials动态计算图控制流与条件执行实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考