深入解析 wordpress/browserslist-configGutenberg 的浏览器兼容性共享配置【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenbergwordpress/browserslist-config是 GutenbergWordPress 块编辑器monorepo 中面向 Browserslist 的官方共享配置包它把 WordPress 的浏览器支持策略固化为一份可被任意前端构建工具链复用的查询集合。本文以该包的 README 为骨架结合仓库内源码、测试与调用方实现系统讲解它的安装、接入方式、每条查询规则的含义、在 Gutenberg 内部的实际用法以及版本演进帮助你在自己的项目中快速对齐 WordPress 生态的浏览器兼容标准。这个包解决什么问题现代前端构建链Autoprefixer 自动添加 CSS 前缀、Babel 语法转译、PostCSS 处理、ESLint 兼容性检查、stylelint 属性校验等都需要知道你到底要支持哪些浏览器。Browserslist 用一套可读的查询语法如 1%、last 2 versions来描述这个目标集而shareable config共享配置则把这份查询列表封装成可复用、可继承的 npm 包。Gutenberg 作为 WordPress 官方编辑器项目必须与 WordPress 核心的浏览器支持策略保持一致因此将这份策略沉淀为wordpress/browserslist-config它导出一个代表受支持浏览器集合的字符串数组任何项目只需一行extends wordpress/browserslist-config即可继承无需自行维护浏览器清单。安装与运行环境要求按照包 README将本模块安装为开发依赖$ npm install browserslist wordpress/browserslist-config --save-dev需要同时安装browserslist本身——共享配置只提供查询规则实际解析查询、输出目标浏览器列表的工作由browserslist包完成。Node.js 版本要求README 明确说明本包要求具备长期支持LTS状态的 Node.js 版本Active LTS 或 Maintenance LTS与更老版本不兼容。这一约束在包内 package.json 中有精确落地engines: { node: 18.12.0, npm: 8.19.2 }从 CHANGELOG.md 可以看到这条门槛的历史演进3.x/4.x 时代最低要求 Node 122022 年 8 月提升到 Node 142024 年 5 月发布的 6.0.0 又提升至 Node 18.12.0始终保持跟随 LTS 版本的策略。如果你的本地 Node 低于 18.12.0需要先升级运行时再使用本包。接入方式两种标准姿势README 提供了两种官方推荐写法。方式一写入 package.json 的 browserslist 字段browserslist: [ extends wordpress/browserslist-config ]方式二使用 .browserslistrc 配置文件extends wordpress/browserslist-config两种方式等价extends关键字会告诉 Browserslist 去加载名为wordpress/browserslist-config的共享配置包并展开其中的全部查询。选择哪种取决于你的团队习惯单仓小项目倾向package.json字段多工具共享配置或希望把配置独立成文件时倾向.browserslistrc。编程式导入导出的是一个数组README 特别强调该包被import或require时直接返回受支持浏览器的查询数组。查看包入口 index.js它的实现极简——整个模块就是一条 CommonJS 导出语句module.exports [ 1%, last 1 Android versions, last 1 ChromeAndroid versions, last 2 Chrome versions, last 2 Firefox versions, last 2 Safari versions, last 2 iOS versions, last 2 Edge versions, last 2 Opera versions, ];这意味着除了配置文件方式外你还可以在 JS 代码中直接引用它再交给 Browserslist API 处理。仓库内的 测试文件 恰好验证了这两个关键契约import browserslist from browserslist; import { expect, it } from vitest; import config from ../; it( should export an array, () { expect( Array.isArray( config ) ).toBe( true ); } ); it( should not contain invalid queries, () { const result browserslist( config ); expect( result ).toBeTruthy(); } );第一条断言保证导出的必须是数组符合 Browserslist 对配置的预期第二条用browserslist( config )实际解析一次确保数组中不存在非法查询——如果某个查询写法在未来版本的 Browserslist 中失效CI 会立即失败。这个测试模式也适合复制到你自己的共享配置包中。查询规则逐条解析WordPress 究竟支持哪些浏览器结合 index.js 源码这套配置由 9 条查询组成逐条解读如下查询表达式含义 1%全球使用率超过 1% 的浏览器last 1 Android versions最近 1 个 Android 系统版本last 1 ChromeAndroid versions最近 1 个 Android 版 ChromeChromeAndroid版本last 2 Chrome versions最近 2 个桌面版 Chrome 版本last 2 Firefox versions最近 2 个 Firefox 版本last 2 Safari versions最近 2 个 Safari 版本last 2 iOS versions最近 2 个 iOSSafari on iOS版本last 2 Edge versions最近 2 个 Edge 版本last 2 Opera versions最近 2 个 Opera 版本设计意图可以归纳为三点桌面与移动双覆盖Chrome、Firefox、Safari、Edge、Opera 五大桌面引擎各保留最近两个版本覆盖主流浏览器快速迭代的节奏iOS 与 Android含 ChromeAndroid则针对移动端单独追齐版本。用使用率兜底 1%是一条基于全球统计数据caniuse 数据的动态查询任何使用率超过 1% 的浏览器都会自动纳入避免硬编码版本列表导致遗漏长尾但仍有真实用户的环境。不再包含旧版 IE与历史版本相比当前配置中没有任何 Internet Explorer 相关查询。这一点在 CHANGELOG.md 的 4.0.0 版本中有明确记录——Drop support for Internet Explorer 11这是 WordPress 官方向现代浏览器迁移的标志性决策。需要特别说明的是last 2与 1%是并集关系最终的支持列表是这些查询结果合并后的集合因而既照顾快速更新的主流浏览器也覆盖仍有使用份额的浏览器同时剔除了过时环境。在 Gutenberg 内部如何被消费这个包不是孤立的示例配置而是 Gutenberg 构建链的真实基础设施。在仓库内搜索wordpress/browserslist-config可以发现多个构建相关包把它作为依赖引用packages/babel-preset-default/package.jsonGutenberg 的默认 Babel 预设依赖本包wordpress/browserslist-config: file:../browserslist-config并配套使用browserslistBabel 据此决定需要把哪些新语法转译成兼容目标浏览器的 ES 版本。packages/postcss-plugins-preset/lib/index.jsPostCSS 预设通过编程式导入直接消费查询数组overrideBrowserslist: require( wordpress/browserslist-config ),这里的overrideBrowserslist正是 AutoprefixerPostCSS 生态的自动加前缀工具的选项其作用是让 Autoprefixer 使用本配置决定需要为哪些浏览器生成厂商前缀从而避免为早已不用的浏览器输出冗余 CSS。packages/scripts/package.json 与 packages/wp-build/package.json构建脚本与构建工具包同样引用了本配置保证从源码到产物的整个编译管线使用同一份浏览器目标。由此可以推断Gutenberg 的 Babel 转译目标、Autoprefixer 前缀生成策略统一收敛于这一个包index.js中那 9 行查询就是整个项目浏览器兼容边界的单一事实来源single source of truth。与其他工具的协同Autoprefixer / Babel / ESLint / PostCSS / stylelintREADME 指出除直接在配置文件中继承外这个包导出的数组也可以直接喂给各类支持 Browserslist 的工具例如 Autoprefixer、Babel、ESLinteslint-plugin-compat类插件、PostCSS 与 stylelint。仓库内 postcss-plugins-preset/lib/index.js 的overrideBrowserslist用法就是把查询数组直接传给某个工具的现成范例可以推广到其他场景Babel配合babel/preset-env的targets选项或直接依赖项目级 browserslist 配置按需转译语法与注入 polyfillAutoprefixer决定哪些 CSS 属性需要加-webkit-、-moz-等前缀PostCSS / stylelint基于支持范围做属性兼容性校验ESLint借助eslint-plugin-compat等插件对用到的 API 做可用性检查。这些工具共同遵循 Browserslist 的解析规则读取项目 browserslist 配置含extends继承把查询解析为具体浏览器版本列表再各自按需处理。因此只要你在项目里接入一次本配置整条工具链的浏览器目标就全部对齐了。版本演进与破坏性变更速览从 CHANGELOG.md 可以梳理出该包的关键节点当前仓库版本为 6.55.01.0.02018初始发布2.0.0转移至wordpressnpm 组织正式更名为wordpress/browserslist-config4.0.02021-05移除 Internet Explorer 11 支持Node.js 最低版本提升至 v125.0.02022-08Node.js 最低版本提升至 146.0.02024-05Node.js 最低版本提升至 18.12.0与长期支持版本保持一致。升级本包时需重点留意这类 major 版本它往往意味着支持的浏览器集合或最低 Node 版本的调整可能连带影响你的构建产物是否还需要兼容旧环境。参与贡献该包是 Gutenberg monorepo 中的一个独立子包。整个项目以 monorepo 形式组织由多个各自独立发布到 npm 的软件包构成除被 WordPress 核心使用外也被其他软件项目引用。若想为它提交修改例如调整浏览器支持策略、补充测试请遵循项目主仓库的贡献指南修改后记得同步更新本包的 CHANGELOG.md当前仓库版本 6.55.0 的记录位于 Unreleased 段之下。小结wordpress/browserslist-config用极简的实现一个导出 9 条查询的index.js承载了 WordPress 生态的浏览器兼容策略安装时注意 Node ≥ 18.12.0 的运行时要求接入时既可用package.json字段也可用.browserslistrc运行时可编程式拿到查询数组交给 Autoprefixer、Babel 等工具。如果你正在开发 WordPress 插件、主题或任何希望与 WordPress 保持同一浏览器支持口径的前端项目继承这份共享配置是成本最低且与生态对齐最稳妥的做法。【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
深入解析 @wordpress/browserslist-config：Gutenberg 的浏览器兼容性共享配置
深入解析 wordpress/browserslist-configGutenberg 的浏览器兼容性共享配置【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenbergwordpress/browserslist-config是 GutenbergWordPress 块编辑器monorepo 中面向 Browserslist 的官方共享配置包它把 WordPress 的浏览器支持策略固化为一份可被任意前端构建工具链复用的查询集合。本文以该包的 README 为骨架结合仓库内源码、测试与调用方实现系统讲解它的安装、接入方式、每条查询规则的含义、在 Gutenberg 内部的实际用法以及版本演进帮助你在自己的项目中快速对齐 WordPress 生态的浏览器兼容标准。这个包解决什么问题现代前端构建链Autoprefixer 自动添加 CSS 前缀、Babel 语法转译、PostCSS 处理、ESLint 兼容性检查、stylelint 属性校验等都需要知道你到底要支持哪些浏览器。Browserslist 用一套可读的查询语法如 1%、last 2 versions来描述这个目标集而shareable config共享配置则把这份查询列表封装成可复用、可继承的 npm 包。Gutenberg 作为 WordPress 官方编辑器项目必须与 WordPress 核心的浏览器支持策略保持一致因此将这份策略沉淀为wordpress/browserslist-config它导出一个代表受支持浏览器集合的字符串数组任何项目只需一行extends wordpress/browserslist-config即可继承无需自行维护浏览器清单。安装与运行环境要求按照包 README将本模块安装为开发依赖$ npm install browserslist wordpress/browserslist-config --save-dev需要同时安装browserslist本身——共享配置只提供查询规则实际解析查询、输出目标浏览器列表的工作由browserslist包完成。Node.js 版本要求README 明确说明本包要求具备长期支持LTS状态的 Node.js 版本Active LTS 或 Maintenance LTS与更老版本不兼容。这一约束在包内 package.json 中有精确落地engines: { node: 18.12.0, npm: 8.19.2 }从 CHANGELOG.md 可以看到这条门槛的历史演进3.x/4.x 时代最低要求 Node 122022 年 8 月提升到 Node 142024 年 5 月发布的 6.0.0 又提升至 Node 18.12.0始终保持跟随 LTS 版本的策略。如果你的本地 Node 低于 18.12.0需要先升级运行时再使用本包。接入方式两种标准姿势README 提供了两种官方推荐写法。方式一写入 package.json 的 browserslist 字段browserslist: [ extends wordpress/browserslist-config ]方式二使用 .browserslistrc 配置文件extends wordpress/browserslist-config两种方式等价extends关键字会告诉 Browserslist 去加载名为wordpress/browserslist-config的共享配置包并展开其中的全部查询。选择哪种取决于你的团队习惯单仓小项目倾向package.json字段多工具共享配置或希望把配置独立成文件时倾向.browserslistrc。编程式导入导出的是一个数组README 特别强调该包被import或require时直接返回受支持浏览器的查询数组。查看包入口 index.js它的实现极简——整个模块就是一条 CommonJS 导出语句module.exports [ 1%, last 1 Android versions, last 1 ChromeAndroid versions, last 2 Chrome versions, last 2 Firefox versions, last 2 Safari versions, last 2 iOS versions, last 2 Edge versions, last 2 Opera versions, ];这意味着除了配置文件方式外你还可以在 JS 代码中直接引用它再交给 Browserslist API 处理。仓库内的 测试文件 恰好验证了这两个关键契约import browserslist from browserslist; import { expect, it } from vitest; import config from ../; it( should export an array, () { expect( Array.isArray( config ) ).toBe( true ); } ); it( should not contain invalid queries, () { const result browserslist( config ); expect( result ).toBeTruthy(); } );第一条断言保证导出的必须是数组符合 Browserslist 对配置的预期第二条用browserslist( config )实际解析一次确保数组中不存在非法查询——如果某个查询写法在未来版本的 Browserslist 中失效CI 会立即失败。这个测试模式也适合复制到你自己的共享配置包中。查询规则逐条解析WordPress 究竟支持哪些浏览器结合 index.js 源码这套配置由 9 条查询组成逐条解读如下查询表达式含义 1%全球使用率超过 1% 的浏览器last 1 Android versions最近 1 个 Android 系统版本last 1 ChromeAndroid versions最近 1 个 Android 版 ChromeChromeAndroid版本last 2 Chrome versions最近 2 个桌面版 Chrome 版本last 2 Firefox versions最近 2 个 Firefox 版本last 2 Safari versions最近 2 个 Safari 版本last 2 iOS versions最近 2 个 iOSSafari on iOS版本last 2 Edge versions最近 2 个 Edge 版本last 2 Opera versions最近 2 个 Opera 版本设计意图可以归纳为三点桌面与移动双覆盖Chrome、Firefox、Safari、Edge、Opera 五大桌面引擎各保留最近两个版本覆盖主流浏览器快速迭代的节奏iOS 与 Android含 ChromeAndroid则针对移动端单独追齐版本。用使用率兜底 1%是一条基于全球统计数据caniuse 数据的动态查询任何使用率超过 1% 的浏览器都会自动纳入避免硬编码版本列表导致遗漏长尾但仍有真实用户的环境。不再包含旧版 IE与历史版本相比当前配置中没有任何 Internet Explorer 相关查询。这一点在 CHANGELOG.md 的 4.0.0 版本中有明确记录——Drop support for Internet Explorer 11这是 WordPress 官方向现代浏览器迁移的标志性决策。需要特别说明的是last 2与 1%是并集关系最终的支持列表是这些查询结果合并后的集合因而既照顾快速更新的主流浏览器也覆盖仍有使用份额的浏览器同时剔除了过时环境。在 Gutenberg 内部如何被消费这个包不是孤立的示例配置而是 Gutenberg 构建链的真实基础设施。在仓库内搜索wordpress/browserslist-config可以发现多个构建相关包把它作为依赖引用packages/babel-preset-default/package.jsonGutenberg 的默认 Babel 预设依赖本包wordpress/browserslist-config: file:../browserslist-config并配套使用browserslistBabel 据此决定需要把哪些新语法转译成兼容目标浏览器的 ES 版本。packages/postcss-plugins-preset/lib/index.jsPostCSS 预设通过编程式导入直接消费查询数组overrideBrowserslist: require( wordpress/browserslist-config ),这里的overrideBrowserslist正是 AutoprefixerPostCSS 生态的自动加前缀工具的选项其作用是让 Autoprefixer 使用本配置决定需要为哪些浏览器生成厂商前缀从而避免为早已不用的浏览器输出冗余 CSS。packages/scripts/package.json 与 packages/wp-build/package.json构建脚本与构建工具包同样引用了本配置保证从源码到产物的整个编译管线使用同一份浏览器目标。由此可以推断Gutenberg 的 Babel 转译目标、Autoprefixer 前缀生成策略统一收敛于这一个包index.js中那 9 行查询就是整个项目浏览器兼容边界的单一事实来源single source of truth。与其他工具的协同Autoprefixer / Babel / ESLint / PostCSS / stylelintREADME 指出除直接在配置文件中继承外这个包导出的数组也可以直接喂给各类支持 Browserslist 的工具例如 Autoprefixer、Babel、ESLinteslint-plugin-compat类插件、PostCSS 与 stylelint。仓库内 postcss-plugins-preset/lib/index.js 的overrideBrowserslist用法就是把查询数组直接传给某个工具的现成范例可以推广到其他场景Babel配合babel/preset-env的targets选项或直接依赖项目级 browserslist 配置按需转译语法与注入 polyfillAutoprefixer决定哪些 CSS 属性需要加-webkit-、-moz-等前缀PostCSS / stylelint基于支持范围做属性兼容性校验ESLint借助eslint-plugin-compat等插件对用到的 API 做可用性检查。这些工具共同遵循 Browserslist 的解析规则读取项目 browserslist 配置含extends继承把查询解析为具体浏览器版本列表再各自按需处理。因此只要你在项目里接入一次本配置整条工具链的浏览器目标就全部对齐了。版本演进与破坏性变更速览从 CHANGELOG.md 可以梳理出该包的关键节点当前仓库版本为 6.55.01.0.02018初始发布2.0.0转移至wordpressnpm 组织正式更名为wordpress/browserslist-config4.0.02021-05移除 Internet Explorer 11 支持Node.js 最低版本提升至 v125.0.02022-08Node.js 最低版本提升至 146.0.02024-05Node.js 最低版本提升至 18.12.0与长期支持版本保持一致。升级本包时需重点留意这类 major 版本它往往意味着支持的浏览器集合或最低 Node 版本的调整可能连带影响你的构建产物是否还需要兼容旧环境。参与贡献该包是 Gutenberg monorepo 中的一个独立子包。整个项目以 monorepo 形式组织由多个各自独立发布到 npm 的软件包构成除被 WordPress 核心使用外也被其他软件项目引用。若想为它提交修改例如调整浏览器支持策略、补充测试请遵循项目主仓库的贡献指南修改后记得同步更新本包的 CHANGELOG.md当前仓库版本 6.55.0 的记录位于 Unreleased 段之下。小结wordpress/browserslist-config用极简的实现一个导出 9 条查询的index.js承载了 WordPress 生态的浏览器兼容策略安装时注意 Node ≥ 18.12.0 的运行时要求接入时既可用package.json字段也可用.browserslistrc运行时可编程式拿到查询数组交给 Autoprefixer、Babel 等工具。如果你正在开发 WordPress 插件、主题或任何希望与 WordPress 保持同一浏览器支持口径的前端项目继承这份共享配置是成本最低且与生态对齐最稳妥的做法。【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
