Svelte 浏览器支持最低版本要求、功能例外表及其自动化生成机制【免费下载链接】svelteweb development for the rest of us项目地址: https://gitcode.com/GitHub_Trending/sv/svelte本文讲解 Svelte 的浏览器支持矩阵哪些浏览器版本是 Svelte 运行时的最低门槛、哪些特定功能需要更高的浏览器版本以及这套数据是如何通过构建管线rollup 打包 TypeScript 类型感知扫描 Baseline 数据自动生成并维护的。读完后你既能直接查表确定部署目标也能理解表格背后每个数字的来源从而准确评估自己项目而非仅 Svelte 本体的兼容性。一、Svelte 的最低浏览器版本要求下表是 Svelte 官方文档声明的最低浏览器版本它由 Svelte 内部代码实际使用的浏览器 API 推导而来数据快照见 browser-support.md| Browser | Minimum version | | - | - | | Chrome/Edge | 87 | | Firefox | 83 | | Safari | 14 | | Opera | 73 | | Opera (Android) | 62 | | Samsung Internet | 14.0 | | Android WebView | 87 | | Internet Explorer | not supported |需要强调三点边界范围仅限 Svelte 本身。官方文档 05-browser-support.md 明确说明该表不覆盖 SvelteKit、其他 Svelte 生态库也不覆盖你自己的代码。如果你的应用还依赖第三方库实际兼容基线取决于其中最严格的那一方。这是一个 Baseline 目标。表格注释将其等价于 Baseline 2020 目标即 Web 平台 Baseline 体系中 2020 年及以前达到基线的全部 API 都可用。Internet Explorer 不受支持表格中直接标注 not supported。二、功能例外部分特性要求更高的浏览器版本并非所有 Svelte 功能都满足上面这条基线。少数功能依赖更新的浏览器 API只有当你确实使用了这些特定功能时才需要关注第二张表快照见 browser-support-features.md| Feature | Chrome/Edge | Firefox | Safari | | - | - | - | - | |$state.snapshot| 98 | 94 | 15.4 | |bind:devicePixelContentBoxSize| — | 93 | not supported | |flipfromsvelte/animate| — | 126 | — |表中 “—” 表示该浏览器满足基线即可无需额外版本要求“not supported” 表示该浏览器截至表格生成时没有支持该 API功能实际不可用。结合生成脚本 generate-browser-support.ts 中的注释和源码可以弄清这三行的来历$state.snapshot快照机制依赖structuredClone。该 API 在运行时确实被调用见 clone.js 中两处structuredClone(value)调用L110、L131。bind:devicePixelContentBoxSize依赖 ResizeObserver 的box: device-pixel-content-box构造选项和entry.devicePixelContentBoxSize属性对应运行时代码 size.js。脚本注释说明Safari 从 15.4 起静默接受该选项但从未暴露对应的 entry 属性因此该绑定在任意版本的 Safari 上读取的都是undefined——这就是表中 Safari 标注 not supported 的原因。flipsvelte/animate其 fallback 路径会读取getComputedStyle(current).zoom见 animate/index.js。Firefox 直到 126 版本才在CSSStyleDeclaration上暴露.zoom更早版本读取结果为空字符串会破坏动画计算——因此只有 Firefox 一列需要提升版本要求。三、表格如何生成从打包到 Baseline 推导的完整管线上述两张表都是自动生成的文件头部标注 “do not edit”由 generate-browser-support.ts 重新生成 05-browser-support.md 中include的两个.generated片段。脚本头部的管线说明概括了四步按用户视角打包每个运行时入口。脚本读取 package.json 的exports字段枚举所有面向浏览器的子包browser_subpaths()自动过滤./compiler、./server等 Node-only 导出再用 rollup 以[production, import, browser, default]导出条件打包bundle()函数。这样扫描的是浏览器中真实执行的代码而非源码。类型感知扫描。检测器 browser-support.detector.js 用 TypeScript 编译器 API 构建ts.Program TypeChecker遍历打包产物全局标识符如structuredClone、ResizeObserver类型成员访问按接收者的解析类型匹配如CSSStyleDeclaration.zoomJS 语法特性可选链、空值合并、私有字段等见SYNTAX_PREDICATES表特定字符串字面量如device-pixel-content-box用于捕获 AST 无法体现的构造器选项。 扫描结果映射到web-features数据集里的 feature ID。此外register_extra_rules()注册了补充规则用于web-features尚未收录的 API即上文 Firefox 126 的zoom读取和 ResizeObserver 的 device-pixel 选项两条。 除运行时包外脚本还会加载快照测试目录tests/snapshot/samples中所有编译器产出的 client JS 做纯语法扫描覆盖编译器会生成的各种模式绑定、过渡、svelte:element、水合标记等。推导 Baseline 年份。compute_floor()取所有被检出 feature 的最高 Baseline 年份作为运行时基线并保证不低于 2015Math.max(year, 2015)确保文档永远不会声称一个 ES6 之前的目标。翻译为具体浏览器版本。优先使用web-features的逐功能精确版本数据缺失时回退到baseline-browser-mapping的年份映射browser_versions_for()调用getCompatibleVersions({ targetYear, includeDownstreamBrowsers: true })并过滤掉 UC、QQ 等长尾浏览器以保持表格聚焦。Chrome 与 Edge 版本相同时合并为一行展示与上表一致。脚本还有一道自检validate_ignore_features()会校验每条“行为性忽略”条目仍能被检测器检出若 API 已从运行时移除则直接报错提示维护者删除陈旧条目——这保证了抑制清单不会悄悄过时。四、抑制清单为什么某些 API 不抬高基线生成脚本定义了两类“抑制”ignore理解它们是读懂表格的关键SAFE_TO_IGNORE数据安全豁免——无论运行时当前是否使用该 API 都不影响基线原因有二web-features数据集误分类了 API。例如devicepixelratio因数据集中 Safari 支持信息缺失被标记为 Baseline false但该属性实际上早在十年前就已进入所有 SafariSvelte 对 API 做了运行时特性检测并在不可用时优雅降级。典型例子是trusted-typesreconciler.js 用globalThis?.window?.trustedTypes ...createPolicy(svelte-trusted-html, ...)的可选链写法——旧浏览器读不到trustedTypes时表达式直接短路功能正常降级。BEHAVIORAL_IGNORE行为性抑制——这些 API 确实存在于运行时但只经由特定代码路径触达已在“功能例外表”中单独说明因此不抬高总体基线。当前包含structured-clone对应$state.snapshot、extra:css-zoom-readflip的 zoom 读取和extra:device-pixel-content-box三条恰好与第二张表的三行一一对应。五、实践指引常规部署按第一张表配置即可等价于 Baseline 2020 目标IE 用户直接放弃支持。使用了例外功能如果你用到$state.snapshot、bind:devicePixelContentBoxSize或animate:flip按第二张表取更严格的版本其中bind:devicePixelContentBoxSize在 Safari 上根本不可用需要为该绑定准备降级方案。数据会随版本演进表格由脚本从“打包产物 → API 检出 → Baseline 数据”链路生成Svelte 内部每引入或移除一个 API重新运行脚本就会刷新表格因此本文引用的版本数字以当前仓库快照为准升级 Svelte 后建议重新核对官方文档页。别忘了你自己的代码和生态依赖官方表格只约束 Svelte 本体完整兼容性评估还需叠加你的业务代码、SvelteKit 及其他库的要求。关键文件索引| 内容 | 路径 | | - | - | | 官方浏览器支持文档主体 | 05-browser-support.md | | 基线版本表生成产物 | browser-support.md | | 功能例外表生成产物 | browser-support-features.md | | 生成脚本打包 扫描 渲染 | generate-browser-support.ts | | 类型感知 API 检测器 | browser-support.detector.js | |structuredClone使用处 | clone.js | |trusted-types特性检测处 | reconciler.js | | ResizeObserver device-pixel 绑定 | size.js | |flip的 zoom 读取 | animate/index.js |【免费下载链接】svelteweb development for the rest of us项目地址: https://gitcode.com/GitHub_Trending/sv/svelte创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考