
Babel Compat-Data 深度指南支撑 babel/preset-env 插件决策的兼容性数据包【免费下载链接】babel Babel is a compiler for writing next generation JavaScript.项目地址: https://gitcode.com/gh_mirrors/ba/babelbabel/compat-data 是 Babel 编译器生态中用于确定需要哪些 Babel 插件的兼容性数据包compat-data它以一份份 JSON 数据文件记录每个语法/API 特性在 Chrome、Firefox、Safari、Node.js、Electron 等各目标环境中的最低支持版本。babel/preset-env 与 babel/helper-compilation-targets 正是基于这份数据结合 browserslist 目标查询自动决定哪些插件需要开启、哪些可以跳过。读完本文你将掌握该数据包的结构、四个数据文件的含义与消费方式、在项目中的安装使用以及它在 Babel 源码中的实际调用链。一、什么是 babel/compat-datababel/compat-data是 Babel 官方维护的一个零逻辑数据包它自身不含任何转换逻辑只以 JSON 形式维护一张特性 → 各环境最低支持版本的映射表。它的设计目标在 README.md 中概括为一句话The compat-data to determine required Babel plugins——即用于确定所需 Babel 插件的兼容性数据。在 package.json 中可以看到它的完整定位包名babel/compat-data版本8.0.0MIT 许可描述The compat-data to determine required Babel plugins关键词babel、compat-table、compat-data导出入口exports字段公开了 4 个数据子模块分别对应data/目录下的 4 个 JSON 文件。它的核心价值在于把某个 Babel 转换插件对应的语法特性在哪些环境版本中已经原生支持这一事实集中管理让babel/preset-env等上层工具可以纯粹地做版本比较而无需把兼容性信息硬编码在插件代码里。数据以版本号的形式存在于 data/plugins.json 等文件中例如transform-unicode-sets-regex在 Chrome 112、Firefox 116、Safari 17、Node.js 20 起才原生支持因此当targets指定的浏览器版本低于这些值时preset-env 就会决定启用该转换插件。二、安装与基本使用根据 README.md该包可用 npm 或 yarn 安装npm install --save babel/compat-data或使用 yarnyarn add babel/compat-data注意babel/compat-data是运行时数据依赖建议以--save写入dependencies而不是devDependencies因为生成代码或运行期解析目标环境时需要读取这些 JSON 数据。安装完成后可以直接引用其公开的子模块入口// 读取各转换插件的最低支持版本表 const plugins require(babel/compat-data/plugins); // 读取 ES Modules 原生支持版本表es6.module const nativeModules require(babel/compat-data/native-modules); // 读取插件之间的覆盖关系 const overlappingPlugins require(babel/compat-data/overlapping-plugins); // 读取 bugfix 插件的最低支持版本表 const pluginBugfixes require(babel/compat-data/plugin-bugfixes);这些入口映射定义在 package.json 的exports字段中子模块导出对应数据文件babel/compat-data/pluginsdata/plugins.jsonbabel/compat-data/native-modulesdata/native-modules.jsonbabel/compat-data/overlapping-pluginsdata/overlapping-plugins.jsonbabel/compat-data/plugin-bugfixesdata/plugin-bugfixes.jsonbabel/compat-data/package.json包自身的package.json三、四个数据文件的结构与语义babel/compat-data的全部数据都位于 data/ 目录下共 4 个 JSON 文件。下面逐一说明它们的结构与用途。1. plugins.json语法特性的最低支持版本表这是数据包的核心文件格式为{ 插件名: { 环境名: 最低支持版本, ... } }。以 data/plugins.json 中的真实条目为例{ transform-regexp-modifiers: { chrome: 125, opera: 111, edge: 125, firefox: 132, node: 23, samsung: 27, electron: 31.0 }, transform-unicode-sets-regex: { chrome: 112, opera: 98, edge: 112, firefox: 116, safari: 17, node: 20, deno: 1.32, ios: 17, samsung: 23, opera_mobile: 75, electron: 24.0 } }每条记录的含义是当目标环境的版本低于表中对应值时该语法特性尚未被原生支持需要启用对应的 Babel 转换插件反之则可跳过转换减少输出代码的体积。文件中的键除了常规的transform-*插件外还包含以bugfix/为前缀的条目如bugfix/transform-v8-static-class-fields-redefine-readonly。这些是 Babel 7.9 引入的精准修复型插件当某个常规插件如transform-class-properties被选中时preset-env 会优先用更小范围的 bugfix 插件替代整体转换只修复特定引擎的已知 bug从而让大部分现代浏览器继续使用原生语法。2. native-modules.jsonES Modules 原生支持版本表该文件记录的是各环境中ES Moduleses6.module的原生支持版本data/native-modules.json 内容如下{ es6.module: { chrome: 61, and_chr: 61, edge: 16, firefox: 60, and_ff: 60, node: 13.2.0, opera: 48, op_mob: 45, safari: 10.1, ios: 10.3, samsung: 8.2, android: 61, electron: 2.0 } }它的特殊用途是支撑targets.esmodules配置当用户在babel/preset-env中设置targets: { esmodules: true }时babel/helper-compilation-targets会读取这张表把目标环境自动限定为支持原生 ES Modules的浏览器集合。从源码 src/index.ts 可以看到这一消费方式const ESM_SUPPORT browserModulesData[es6.module];随后在esmodules处理逻辑中将表中每个浏览器转换为浏览器 版本的 browserslist 查询见 src/index.ts并对已解析出的目标版本逐一做esmodules过滤deno 与 ie 被排除、无 ESM 支持记录的浏览器被删除最终得到一份支持 ES Modules的目标集合。3. overlapping-plugins.json插件覆盖关系表该文件记录常规插件 → 可替代它的 bugfix 插件的映射关系data/overlapping-plugins.json 完整内容如下{ transform-async-to-generator: [bugfix/transform-async-arrows-in-class], transform-parameters: [ bugfix/transform-edge-default-parameters, bugfix/transform-safari-id-destructuring-collision-in-function-expression ], transform-function-name: [bugfix/transform-edge-function-name], transform-block-scoping: [ bugfix/transform-safari-block-shadowing, bugfix/transform-safari-for-shadowing ], transform-destructuring: [ bugfix/transform-safari-rest-destructuring-rhs-array ], transform-template-literals: [bugfix/transform-tagged-template-caching], transform-optional-chaining: [ bugfix/transform-v8-spread-parameters-in-optional-chaining ], transform-class-properties: [ bugfix/transform-v8-static-class-fields-redefine-readonly, bugfix/transform-firefox-class-in-computed-class-key, bugfix/transform-safari-class-field-initializer-scope ] }这张表的意义在于例如transform-class-properties对应 3 个不同的 bugfix 插件分别针对 V8Chrome/Node 中静态类字段重定义 readonly 的 bug、Firefox计算类键中的类和 Safari类字段初始化器作用域。当预设需要转换类属性时可以依据这张表把大而全的整体转换替换为只针对特定引擎小问题的精准修复从而让支持原生语法的环境跳过转换、减少代码膨胀。4. plugin-bugfixes.jsonbugfix 插件的支持版本表该文件记录每个bugfix/transform-*插件的最低支持版本结构同plugins.json。以 data/plugin-bugfixes.json 中的条目为例{ bugfix/transform-async-arrows-in-class: { chrome: 55, opera: 42, edge: 15, firefox: 52, safari: 11, node: 7.6, deno: 1, ios: 11, samsung: 6, opera_mobile: 42, electron: 1.6 }, bugfix/transform-safari-id-destructuring-collision-in-function-expression: { chrome: 49, opera: 36, edge: 14, firefox: 2, safari: 16.3, node: 6, deno: 1, ios: 16.3, samsung: 5 } }注意观察同一个 bugfix 插件的最低支持版本在不同环境中差异很大——例如bugfix/transform-safari-id-destructuring-collision-in-function-expression只对 Safari 16.3 以下、iOS 16.3 以下的环境有意义而 Chrome/Firefox 早在远古版本就已正确实现。这正是 bugfix 插件的精髓精准修复特定引擎的 bug而不是一揽子降级所有环境。babel/helper-compilation-targets在筛选插件时会把 bugfix 插件与常规插件放在同一张版本表中统一比较见下文调用链。四、在 Babel 源码中的实际调用链babel/compat-data的价值要通过消费者体现。仓库中最核心的消费者是babel/helper-compilation-targetsbabel/preset-env的目标解析底层。下面梳理它的实际使用方式。1. 插件筛选filter-items.tspackages/babel-helper-compilation-targets/src/filter-items.ts 在文件开头直接导入数据import pluginsCompatData from babel/compat-data/plugins with { type: json };其核心逻辑filterItems遍历plugins.json中的每一个特性调用isRequired判断在当前targets下该插件是否必需export function isRequired( name: string, targets: Targets, { compatData pluginsCompatData, includes, excludes } {}, ) { if (excludes?.has(name)) return false; if (includes?.has(name)) return true; return !targetsSupported(targets, compatData[name]); }而targetsSupported同文件第 12-56 行把目标的版本与数据表中的最低实现版本逐一比较取目标环境在support表即 compat-data中的最低实现版本若目标版本低于实现版本则视为不支持、需要转换。若目标的targets为空对象则直接返回false意味着无目标时不做任何跳过判断。2. 目标解析index.ts 与 browserslistpackages/babel-helper-compilation-targets/src/index.ts 是getTargets的入口实现它同样导入 native-modules 数据import browserModulesData from babel/compat-data/native-modules with { type: json };整体流程可以概括为校验并规范化targets输入validateTargetNames、semverifyTarget支持node: true/node: current等特殊取值src/index.ts若未显式指定targets或browsers则自动从process.env.BROWSERSLIST、BROWSERSLIST_CONFIG或 browserslist 配置文件解析查询兜底使用[defaults]src/index.ts若设置了esmodules: true用native-modules.json的es6.module表推导出浏览器查询src/index.ts通过 browserslist 解析查询得到各环境最低版本resolveTargetsCached使用LRUCache缓存结果容量 64最后合并目标输出规范化的Targets对象。解析结果最终会交给filterItems结合plugins.json/plugin-bugfixes.json决定启用哪些插件。3. 调试输出getInclusionReasonsbabel/helper-compilation-targets还导出getInclusionReasons定义于 src/debug.ts经 src/index.ts 对外导出。当使用 preset-env 的debug: true选项时会调用它解释为什么某个插件被包含/排除其依据同样是 compat-data 中每个特性的最低支持版本与目标版本的比较结果。这也是排查为什么我的代码被转换了时的第一手线索。五、数据从何而来生成脚本与数据源babel/compat-data的数据并非手工维护而是通过脚本从权威数据源生成。在 package.json 的scripts字段中定义了build-data任务build-data: ./scripts/download-compat-table.sh node ./scripts/build-data.mjs node ./scripts/build-modules-support.mjs node ./scripts/build-bugfixes-targets.mjs它依次执行download-compat-table.sh下载 ECMAScript 兼容性表compat-table数据build-data.mjs将兼容性表按特性映射为插件 → 最低支持版本build-modules-support.mjs生成 ES Modules 支持数据build-bugfixes-targets.mjs生成 bugfix 插件的目标版本数据。其中特性与插件的对应关系维护在 scripts/data/plugin-features.mjs 中。该文件开头有一段重要警告Plugin ordering is important. Dont reorder this file插件顺序很重要请勿随意重排并在注释中说明了排序约束的原因例如// https://github.com/babel/babel/issues/11278 // transform-parameters should run before object-rest-spread即transform-parameters必须在object-rest-spread之前运行否则会产生错误输出。这个顺序文件同时记录了更细粒度的特性映射例如transform-parameters对应 default function parameters、rest parameters 等多个 compat-table 特性项并可通过exclude排除不支持的子特性如new Function()支持。包的其他 devDependenciesmdn/browser-compat-data、core-js-compat、electron-to-chromium也用于在生成过程中处理 MDN 数据、core-js 模块支持与 Chromium/Electron 版本换算。一个值得注意的细节Chromium 与 Electronbabel/compat-data的数据中同时出现electron字段如transform-unicode-sets-regex的electron: 24.0。这是因为 Electron 的 JS 引擎能力与 Chromium 版本直接相关仓库中提供了 scripts/chromium-to-electron.mjs 负责把 Chromium 版本映射为对应的 Electron 版本从而在数据生成阶段就为 Electron 这一目标环境填充支持版本。六、与 preset-env 配合的典型用法虽然普通项目很少直接消费babel/compat-data但它间接决定了babel/preset-env的行为。典型用法是在 Babel 配置中声明目标环境{ presets: [ [ babel/preset-env, { targets: { chrome: 80, firefox: 75, node: 14 }, debug: true } ] ] }当targets使用 browserslist 查询如 0.5%, last 2 versions, not dead时getTargets会先借助 browserslist 解析出各环境的最低版本再与plugins.json中的数据比对当使用esmodules: true时则会以native-modules.json的es6.module为基准。开启debug: true后控制台会打印getInclusionReasons提供的哪些插件因哪个环境版本而被启用的详细说明——这份说明的数据来源正是本文介绍的四个 JSON 文件。七、总结babel/compat-data虽是一个小而专的数据包却是 Babel 自动按目标环境裁剪转换范围的关键基石4 个 JSON 数据文件plugins.json、native-modules.json、overlapping-plugins.json、plugin-bugfixes.json分别覆盖常规插件、ES Modules、插件覆盖关系与 bugfix 插件消费端babel/helper-compilation-targets通过filterItems/isRequired/targetsSupported完成目标版本 vs 最低支持版本的比较决策见 src/filter-items.ts生成链路由build-data脚本从 compat-table、MDN 等数据源构建特性到插件的顺序映射维护在 scripts/data/plugin-features.mjs在 README.md 中确认的安装方式为npm install --save babel/compat-data或yarn add babel/compat-data。理解这份数据包也就理解了 preset-env 按需转换的决策依据目标环境原生支持的语法不转换不支持的才转换——babel/compat-data正是那张决定是否支持的权威对照表。【免费下载链接】babel Babel is a compiler for writing next generation JavaScript.项目地址: https://gitcode.com/gh_mirrors/ba/babel创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考