SVGO v3到v4迁移指南:5个步骤搞懂所有破坏性变更【免费下载链接】svgoSVG Optimizer for Node.js and CLI. ⚙️项目地址: https://gitcode.com/gh_mirrors/sv/svgo如果你正在使用SVGONode.js 生态最流行的 SVG 优化器与命令行压缩工具从 v3 升级到 v4 时很可能被各种报错卡住。这篇 SVGO v3 到 v4 迁移指南帮你快速定位问题v4 引入了更严格的公共 API 边界、调整了默认插件并改成了纯命名导出。跟着下面 5 个步骤逐一排查绝大多数项目只需 10 分钟即可完成 SVGO 升级。 官方完整文档见 01-migration-from-v3-to-v4.mdx本文是对它的实战化解读。步骤 1:确认 Node.js 版本不低于 16v4 要求Node.js ≥ 16.0.0v3 只需 ≥ 14。这是最常见的隐形门槛——版本装上了一运行就报不支持的语法错误。用node -v检查当前版本低于 16 请先升级运行环境若项目受限于旧 Node可考虑暂时停留在 v3 稳定版或提升 CI/本地运行时版本步骤 2:了解默认行为变化——removeViewBox 和 removeTitle 被移除了这是影响面最广的一项 SVGO v4 破坏性变更preset-default 默认插件集中removeViewBox 与 removeTitle 不再默认启用removeViewBox停用 → 保留viewBoxSVG 可继续自由缩放removeTitle停用 → 保留title提升无障碍访问accessibility体验⚠️ 如果你的业务确实需要删除 viewBox 或 title必须显式声明它们否则 v4 会保留这些内容产出结果和 v3 不一致export default { plugins: [ preset-default, // 内置默认插件 removeViewBox, removeTitle, ], };步骤 3:修改插件名——removeScriptElement 改名为 removeScriptsremoveScripts 插件能力已扩展不仅删除script元素还会清除事件处理器和 script URI。如果你曾在配置里写过旧名字请替换plugins: [ preset-default, - removeScriptElement, removeScripts, ],只用了字符串形式配置插件的同学改动量几乎为零CLI 用户svgo one.svg -o one.min.svg无需任何额外操作。步骤 4:更新导入方式——公共 API 与内部 API 彻底分家v4 划清了公共 API与内部代码的边界不能再随意从svgo/lib/...、svgo/plugins/...深度导入内部模块。正确姿势如下 浏览器打包文件浏览器端统一改为从svgo/browser子路径导入入口定义见 rollup.config.js- import { optimize } from svgo/dist/svgo.browser.js; import { optimize } from svgo/browser;导入辅助函数与插件内置插件列表、XAST 辅助函数等现在全部从包根目录顶层导出内置插件定义见 lib/builtin.js- import { querySelector } from svgo/lib/xast.js; import { querySelector } from svgo; - import { builtin } from svgo/lib/builtin; import { builtinPlugins } from svgo;选择器辅助函数自定义插件注意querySelectorAll、querySelector、matches三个函数的行为变了当 selector 引用了父节点或兄弟节点如div span时需要第三个参数传入节点→父节点的 Map官方提供了mapNodesToParents辅助函数源码见 lib/util/map-nodes-to-parents.js- import { querySelectorAll } from svgo; - const nodes querySelectorAll(childNode, selector); import { querySelectorAll, mapNodesToParents } from svgo; const nodes querySelectorAll(childNode, selector, mapNodesToParents(rootNode)); 拿不准自己是否需要加上第三个参数总是安全的——不传也不会出错传了能兼容更复杂的选择器。步骤 5:切换到命名导出Named Exportsv4 的公共 API只有命名导出不再有默认导出。如果你用的是import svgo from svgo这种默认导入写法必须二选一改造- import svgo from svgo; - svgo.optimize(svg/svg); // 方案一命名导出推荐 import { optimize } from svgo; optimize(svg/svg); // 方案二整包导入 import * as svgo from svgo; svgo.optimize(svg/svg);好消息是纯 CLI 用户、CommonJSrequire用户、已经在用命名导出的 ESM 用户完全不用动。主入口为 lib/svgo-node.js类型声明现在直接随包发布无需再单独安装types/svgo。迁移完成后的验证清单✅ 用node -v确认运行在 Node ≥ 16✅ 全局搜索removeScriptElement、svgo/lib/、svgo/dist/、默认导入写法全部清零✅ 跑一遍构建/CI对比优化前后 SVG 体积是否符合预期✅ 若仍遇问题对照 docs/06-migrations/ 目录下的历史迁移文档含 v2→v3 的 02-migration-from-v2-to-v3.mdx✅ 配置写法参考 README.md 的 Configuration 章节插件清单见 plugins/preset-default.js写在最后SVGO v4 的五大破坏性变更可以一句话概括环境升 Node 16、默认插件更保守、插件名更新、内部模块禁入、只认命名导出。按本文顺序排查基本 10 分钟内即可完成从 v3 到 v4 的 SVGO 升级迁移同时白得更好的缩放保持性与无障碍输出。【免费下载链接】svgoSVG Optimizer for Node.js and CLI. ⚙️项目地址: https://gitcode.com/gh_mirrors/sv/svgo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SVGO v3到v4迁移指南:5个步骤搞懂所有破坏性变更
SVGO v3到v4迁移指南:5个步骤搞懂所有破坏性变更【免费下载链接】svgoSVG Optimizer for Node.js and CLI. ⚙️项目地址: https://gitcode.com/gh_mirrors/sv/svgo如果你正在使用SVGONode.js 生态最流行的 SVG 优化器与命令行压缩工具从 v3 升级到 v4 时很可能被各种报错卡住。这篇 SVGO v3 到 v4 迁移指南帮你快速定位问题v4 引入了更严格的公共 API 边界、调整了默认插件并改成了纯命名导出。跟着下面 5 个步骤逐一排查绝大多数项目只需 10 分钟即可完成 SVGO 升级。 官方完整文档见 01-migration-from-v3-to-v4.mdx本文是对它的实战化解读。步骤 1:确认 Node.js 版本不低于 16v4 要求Node.js ≥ 16.0.0v3 只需 ≥ 14。这是最常见的隐形门槛——版本装上了一运行就报不支持的语法错误。用node -v检查当前版本低于 16 请先升级运行环境若项目受限于旧 Node可考虑暂时停留在 v3 稳定版或提升 CI/本地运行时版本步骤 2:了解默认行为变化——removeViewBox 和 removeTitle 被移除了这是影响面最广的一项 SVGO v4 破坏性变更preset-default 默认插件集中removeViewBox 与 removeTitle 不再默认启用removeViewBox停用 → 保留viewBoxSVG 可继续自由缩放removeTitle停用 → 保留title提升无障碍访问accessibility体验⚠️ 如果你的业务确实需要删除 viewBox 或 title必须显式声明它们否则 v4 会保留这些内容产出结果和 v3 不一致export default { plugins: [ preset-default, // 内置默认插件 removeViewBox, removeTitle, ], };步骤 3:修改插件名——removeScriptElement 改名为 removeScriptsremoveScripts 插件能力已扩展不仅删除script元素还会清除事件处理器和 script URI。如果你曾在配置里写过旧名字请替换plugins: [ preset-default, - removeScriptElement, removeScripts, ],只用了字符串形式配置插件的同学改动量几乎为零CLI 用户svgo one.svg -o one.min.svg无需任何额外操作。步骤 4:更新导入方式——公共 API 与内部 API 彻底分家v4 划清了公共 API与内部代码的边界不能再随意从svgo/lib/...、svgo/plugins/...深度导入内部模块。正确姿势如下 浏览器打包文件浏览器端统一改为从svgo/browser子路径导入入口定义见 rollup.config.js- import { optimize } from svgo/dist/svgo.browser.js; import { optimize } from svgo/browser;导入辅助函数与插件内置插件列表、XAST 辅助函数等现在全部从包根目录顶层导出内置插件定义见 lib/builtin.js- import { querySelector } from svgo/lib/xast.js; import { querySelector } from svgo; - import { builtin } from svgo/lib/builtin; import { builtinPlugins } from svgo;选择器辅助函数自定义插件注意querySelectorAll、querySelector、matches三个函数的行为变了当 selector 引用了父节点或兄弟节点如div span时需要第三个参数传入节点→父节点的 Map官方提供了mapNodesToParents辅助函数源码见 lib/util/map-nodes-to-parents.js- import { querySelectorAll } from svgo; - const nodes querySelectorAll(childNode, selector); import { querySelectorAll, mapNodesToParents } from svgo; const nodes querySelectorAll(childNode, selector, mapNodesToParents(rootNode)); 拿不准自己是否需要加上第三个参数总是安全的——不传也不会出错传了能兼容更复杂的选择器。步骤 5:切换到命名导出Named Exportsv4 的公共 API只有命名导出不再有默认导出。如果你用的是import svgo from svgo这种默认导入写法必须二选一改造- import svgo from svgo; - svgo.optimize(svg/svg); // 方案一命名导出推荐 import { optimize } from svgo; optimize(svg/svg); // 方案二整包导入 import * as svgo from svgo; svgo.optimize(svg/svg);好消息是纯 CLI 用户、CommonJSrequire用户、已经在用命名导出的 ESM 用户完全不用动。主入口为 lib/svgo-node.js类型声明现在直接随包发布无需再单独安装types/svgo。迁移完成后的验证清单✅ 用node -v确认运行在 Node ≥ 16✅ 全局搜索removeScriptElement、svgo/lib/、svgo/dist/、默认导入写法全部清零✅ 跑一遍构建/CI对比优化前后 SVG 体积是否符合预期✅ 若仍遇问题对照 docs/06-migrations/ 目录下的历史迁移文档含 v2→v3 的 02-migration-from-v2-to-v3.mdx✅ 配置写法参考 README.md 的 Configuration 章节插件清单见 plugins/preset-default.js写在最后SVGO v4 的五大破坏性变更可以一句话概括环境升 Node 16、默认插件更保守、插件名更新、内部模块禁入、只认命名导出。按本文顺序排查基本 10 分钟内即可完成从 v3 到 v4 的 SVGO 升级迁移同时白得更好的缩放保持性与无障碍输出。【免费下载链接】svgoSVG Optimizer for Node.js and CLI. ⚙️项目地址: https://gitcode.com/gh_mirrors/sv/svgo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考