Svelte 浏览器支持矩阵：最低版本表、功能例外与自动化推导流水线

Svelte 浏览器支持矩阵最低版本表、功能例外与自动化推导流水线【免费下载链接】svelteweb development for the rest of us项目地址: https://gitcode.com/GitHub_Trending/sv/svelte本文以 Svelte 仓库中机器生成的浏览器支持文档为核心完整解读官方最低浏览器版本表Baseline 2020 含义、各浏览器下限值以及$state.snapshot、bind:devicePixelContentBoxSize、flip三类需要更高浏览器版本的功能例外并结合 generate-browser-support.ts 与 browser-support.detector.js 源码讲清这张表格是如何通过「rollup 打包 TypeScript 类型感知扫描 web-features 数据」全自动推导出来的。读完后你可以准确判断自己的浏览器目标是否满足 Svelte 运行要求并理解该文档每次更新背后的工程机制。一、官方最低浏览器版本表Svelte 仓库中浏览器支持信息的正式载体是 browser-support.md 这份机器生成文档文件首行注明generated in packages/svelte/scripts/generate-browser-support.ts. do not edit它被 Browser support 文档页 通过include引入。官方表述为该表列出的是「Svelte 内部代码所使用的浏览器 API」推导出的最低版本。当前生成的表格内容如下| 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 |表格附有一条关键注释该下限等价于 Baseline 目标为 2020。也就是说Svelte 运行时整体满足 Web 平台「Baseline 2020」口径——即所有在该时间点达到 Baseline 的 Web 特性都能在表中列出的浏览器版本上运行。官方文档页对范围有明确限定这一点必须理解到位表格只覆盖 Svelte 本身svelte包的浏览器端运行时与其编译器输出代码不包含 SvelteKit、其他 Svelte 生态库也不包含你自己的业务代码——这些需要各自独立评估表格由脚本生成因此版本下限不是人工拍定的承诺而是对当前代码实际用到的浏览器 API 的客观测量结果。二、功能例外需要高于运行时下限的浏览器「只覆盖 Svelte 本身」并不意味着所有 Svelte 功能都能在 Chrome 87 / Firefox 83 / Safari 14 上工作。官方文档页设有 Exceptions 小节引入第二份机器生成表 browser-support-features.md。其含义是只有当你的代码用到了下列特定功能时才需要考虑更高的浏览器版本。当前生成的例外表列仅含 Chrome/Edge、Firefox、Safari 三大核心浏览器—表示该浏览器已达到运行时下限、无需额外关注| Feature | Chrome/Edge | Firefox | Safari | | - | - | - | - | |$state.snapshot| 98 | 94 | 15.4 | |bind:devicePixelContentBoxSize| — | 93 | not supported | |flipfromsvelte/animate| — | 126 | — |每一行例外都能在当前仓库源码中找到直接依据1.$state.snapshot—— 依赖structuredClone$state.snapshot用于对状态做不可变快照其底层实现位于 clone.js在快照路径上直接调用全局structuredClone(value)约 L110、L131。structuredClone在三大浏览器中的可用版本分别为 Chrome 98、Firefox 94、Safari 15.4恰好与例外表一致。因此在 Chrome 87–97、Firefox 83–93 或 Safari 14 上Svelte 其余功能正常唯独$state.snapshot不可用。2.bind:devicePixelContentBoxSize—— 依赖 ResizeObserver 的device-pixel-content-box选项该绑定的运行时实现在 size.jsL74 附近以box: device-pixel-content-box构造ResizeObserver。生成脚本的注释generate-browser-support.ts L84-L91说明了 Safari 的特殊性Safari 自 15.4 起静默接受构造选项但从未暴露ResizeObserverEntry.devicePixelContentBoxSize属性因此在任何 Safari 版本上该绑定读到的都是undefined故表中记为not supportedFirefox 则需 93 及以上。3.flipsvelte/animate—— Firefox 需要 126flip动画的补偿计算在 animate/index.js L73 处执行zoom * getComputedStyle(current).zoom;。Firefox 直到 v1262024 年 5 月才在CSSStyleDeclaration上暴露.zoom此前的版本该读取返回空字符串破坏动画数学。由于web-features数据集没有该 API 的条目生成脚本通过补充检测规则register_extra_rulesL73-L79手工登记了CSS zoom property reads规则并指定versions: { firefox: 126 }。三、表格是如何自动推导的四步流水线browser-support.md 顶部注释指向生成器 generate-browser-support.ts。该脚本头部注释完整描述了流水线结合main()L806-L860可归纳为四步第 1 步按「用户实际收到的代码」打包全部浏览器端入口脚本从svelte包的exports映射中枚举所有面向浏览器的子路径browser_subpaths() L161-L171显式排除仅 Node 端的./compiler、./server、./internal/server。对每个入口svelte、svelte/animate、svelte/transition、svelte/store等用 rollup 以production/import/browser/default导出条件打包bundle()L292-L329并将esm-env等 Node 专用分支置为 external——保证扫描的是浏览器真正会执行的代码且已树摇。第 2 步TypeScript 类型感知扫描识别用到的 Web 特性打包产物写入临时目录后交给 browser-support.detector.js。检测器基于web-features数据集构建三类查找表build_detection_maps()L67-L146全局标识符api.X如ResizeObserver与javascript.builtins.X如Promise、Proxy映射到全局名成员访问api.X.Y如HTMLElement.inert与javascript.builtins.X.Y静态方法额外登记XConstructor形式映射到「接收者类型 → 成员 → feature_id」运行时用 TypeChecker 解析expr.member中expr的实际类型并沿基类链匹配get_type_names()L246-L263因此HTMLDivElement能命中HTMLElement的规则JS 语法谓词SYNTAX_PREDICATESL12-L61覆盖空值合并、逻辑赋值、可选链、展开、解构、箭头函数、for await、私有类字段、异步/普通生成器、async 函数、class、let/const、模板字面量等这些不依赖类型信息。此外还有字符串字面量规则按值匹配用于像device-pixel-content-box这类过于独特、不会偶然出现的 API 选项字符串和register_extra_rules()L188-L211供登记web-features尚未收录的 API如前述 CSSzoom读取。编译器输出代码同样纳入扫描脚本读取 snapshot 测试 下每个样本_expected/client目录中的编译产物load_compiler_output_fixtures()L336-L353以纯语法模式扫描覆盖编译器会 emit 的全部模式——绑定、转场、svelte:element、async derived、hydration 标记等。第 3 步计算运行时下限与逐功能条件表运行时下限compute_floor()L395-L412取所有被检测到特性的 Baseline 年份最大值作为「地板」并以Math.max(year, 2015)保底L437-L439确保文档永远不会声称目标是 ES6 之前随后用baseline-browser-mapping的getCompatibleVersions({ targetYear, includeDownstreamBrowsers: true })browser_versions_for()L702-L751把年份翻译成具体浏览器版本。输出表中省略了与桌面版版本相同的 Android/iOS 变体行只保留值得列出的下游浏览器集合chrome、edge、firefox、safari、opera、samsunginternet_android、webview_android 等Internet Explorer恒为not supportedL785。逐功能条件表enumerate_features()L484-L523为每一类用户可见功能构造自包含测试夹具——编译器binding_properties中的每个bind:*按valid_elements生成合法标记如checked/indeterminate配typecheckbox、每个公开子包的每个具名导出动态import枚举L195-L212、编译器RUNES数组中的每个 rune$state到$host含$state.raw、$effect.tracking等、以及需要配套 import 的指令transition:/in:/out:、animate:、use:、{attach}、{html}、custom elements。每个夹具经svelte_compile编译 → rollup 打包 → 类型感知扫描若夹具地板高于运行时地板render_conditional_table()L669-L700就为它输出一行版本优先取web-features的精确 per-browser 数据versions_from_features()L365-L388取各特性最严版本、null表示 not supported 并向上传播无精确数据才回退年份映射。第 4 步防「注释腐化」的自愈校验脚本区分两类抑制集SAFE_TO_IGNOREL131devicepixelratio、trusted-types无论运行时是否使用都永远不影响下限。原因有二——web-features数据集误分类如devicepixelratio因 Safari 支持映射缺失被标 Baseline false但该属性在 Safari 已存在十余年或 Svelte 在运行时做了特性探测并优雅降级典型例子是 reconciler.js 中对globalThis.window.trustedTypes的可选链调用创建svelte-trusted-html策略。BEHAVIORAL_IGNOREL138-L142structured-clone、extra:css-zoom-read、extra:device-pixel-content-box这些 API 确实存在于运行时、但仅经由特定功能路径触达因此其成本记入上文的逐功能例外表而非整体下限。validate_ignore_features()L458-L472会校验每个条目仍被检测器实际标记——如果运行时已移除某 API该条目会直接抛出错误要求删除防止「行为抑制项比它所抑制的 API 活得还久」。四、对使用者的实践含义判断兼容性如果你的项目浏览器目标不低于「Chrome/Edge 87、Firefox 83、Safari 14、Opera 73、Samsung Internet 14.0、Android WebView 87」且不使用第二节列出的三个例外功能Svelte 运行时本身不构成兼容性问题。例外功能的取舍使用$state.snapshot、bind:devicePixelContentBoxSize或animate:flip时需分别核对 Chrome 98 / Firefox 94 / Safari 15.4、Firefox 93Safari 不可用、Firefox 126 这几个更高的门槛若目标浏览器不满足应准备降级方案如不快照、改用contentBoxSize、换用svelte/transition中的其他动画。不要把该表当作项目总预算表格只测量 Svelte 自身代码SvelteKit、第三方库与业务代码各自独立计入兼容性评估。不要手工编辑生成文档.generated/browser-support.md 与 browser-support-features.md 均由 generate-browser-support.ts 重写当 Svelte 运行时新增或移除某个浏览器 API 时重新运行脚本即可让表格自动收敛——BEHAVIORAL_IGNORE的陈旧条目检查第 3 节第 4 步正是这一自愈机制的组成部分。【免费下载链接】svelteweb development for the rest of us项目地址: https://gitcode.com/GitHub_Trending/sv/svelte创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考