React Spectrum 迁移到 Spectrum 2 前如何确认构建工具对 import macro 语法的最低版本要求【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrum如果你正准备把 React Spectrum v3 项目迁移到 Spectrum 2S2先别急着跑 codemod。S2 的样式通过 style macro 实现而 macro 的导入依赖 import attributes 语法import {style} from react-spectrum/s2/style with {type: macro};项目文档在 focused-prerequisites.md 中明确说明迁移工具链并不是全都必须升级但如果项目中使用了 TypeScript、Babel、ESLint、Prettier它们的版本必须达到下面的最低要求否则会出现在解析或格式化with {type: macro}导入语法时的问题。本文只解决一个问题在动手迁移前如何核对当前构建工具链是否满足这些最低版本要求以及核对哪些文件、看什么结果。先确定要检查的是哪个包在多仓库或混合工具链的仓库里文档特别提醒不要假设根目录的 manifest 就是迁移目标。应先在目标包或应用层面检查工具版本再确定两件事包管理器根据 lockfile 判断——yarn.lock、package-lock.json或pnpm-lock.yaml。打包器bundler文档建议在迁移目标层级检测因为 workspace 根目录可能包含 Storybook、Vite 等并不代表被迁移包实际运行时 bundler 的工具。可通过配置文件识别vite.config.*、webpack.config.*、next.config.*、.parcelrc或parcel依赖、rollup.config.*、esbuild 构建脚本见 01-setup-config.md 的 Detection inputs。同时可以在包清单和源码中搜索adobe/react-spectrum、react-spectrum/*、spectrum-icons/*确认迁移涉及的范围。最低版本核对表以下数值来自 focused-prerequisites.md 的 “Minimum tool versions” 一节。核对方式打开目标包的package.jsondependencies/devDependencies和 lockfile逐一对照工具最低版本用途说明文档原文口径TypeScript5.3import attributes 语法with {type: macro}所需Babel7.27.0或安装babel/plugin-syntax-import-attributes插件让 Babel 能解析 import attributes也可用babel/preset-env并设置shippedProposals: true达到同样效果ESLint9.14.0配合typescript-eslint/parser用于检查含该语法的代码Prettier3.1.1正确格式化with {type: macro}导入语法文档原文强调 “These tools are not all strictly required”——不是每一项都必须存在而是项目中实际使用了哪个哪个就必须达到最低版本。如果某项版本低于表中数值要么升级该项要么对 Babel加装babel/plugin-syntax-import-attributes作为替代方案。检查打包器对 style macro 的支持版本之外还有一项关键核对打包器能否处理 macro。文档给出的规则是Parcel ≥ 2.12.0原生支持 S2 style macro无需额外插件。Vite、webpack、Next.js、Rollup、ESBuild需要安装unplugin-parcel-macros并接入构建且保持插件顺序正确让 macro 在工具链其余部分之前运行。以 Vite 为例文档要求在vite.config.ts中把macros.vite()放在插件列表第一位注释 “Must be first!”// vite.config.ts import macros from unplugin-parcel-macros; export default defineConfig({ plugins: [ macros.vite(), // Must be first! // ... ] });安装插件的命令npm 形式yarn/pnpm 同理见 getting-started.mdx 各框架小节npm install unplugin-parcel-macros --devNext.js 特别注意unplugin-parcel-macros目前只支持 webpack不支持 Turbopack。文档要求使用 Next.js 16 及以上版本时确认应用用--webpack标志启动检查dev/build脚本。如果仓库中已有框架专属的 S2 或 macro 配置文档建议保留现有配置不要再叠第二套 macro 配置。用 --dry 做一次无副作用的迁移预检工具链核对通过后可以用官方升级助手做一次不修改任何组件的预检命令来自 migrating.mdxnpx react-spectrum/codemods s1-to-s2 --dry--dry的文档定义是 “Runs the upgrade assistant without making changes to components”即只运行不落地修改适合作为迁移前的验证步骤。可用参数--components只升级指定组件逗号分隔例如--componentsButton,TextField--path指定应用变更的路径默认当前目录.--ignore-pattern忽略匹配 glob 的文件默认**/node_modules/**。结果判定与已知限制文档给出的判定依据版本核对目标包中实际使用的 TypeScript、Babel、ESLint、Prettier 全部达到上表最低版本或 Babel 已装替代插件。macro 配置核对打包器满足 “Parcel ≥ 2.12.0” 或 “已接入unplugin-parcel-macros且顺序正确”Next.js 项目确认走 webpack 而非 Turbopack。--dry预检无异常退出。关于失败现象文档只明确给出一种若打包器未接入 macro 支持style({...})调用未在构建时求值组件会以无样式状态渲染。除此之外的报错文档未列出遇到时不要自行假设结论可回到 focused-prerequisites.md 对照检查清单。边界说明如果使用--agent参数非交互运行它会跳过提示、包安装和 macro 配置因此要求react-spectrum/s2已经安装且可解析预检阶段建议用普通--dry而非--agent。预检通过后文档给出的下一步就是去掉--dry正式运行npx react-spectrum/codemods s1-to-s2或按 migrating.mdx 的组件清单手动迁移codemod 之后的常见手动修复项图标、Flex/Grid/View/Well布局组件、Toast 等见 focused-manual-fixes.md。【免费下载链接】react-spectrumA collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.项目地址: https://gitcode.com/GitHub_Trending/re/react-spectrum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考