Gutenberg 脚本注册清单与依赖共享指南WordPress 插件开发者如何正确使用编辑器内置脚本【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenbergGutenbergWordPress 块编辑器项目为插件开发者提供了一套完整的内置脚本体系覆盖从块创建、UI 组件、数据状态管理到国际化等全部能力。本文以仓库文档 docs/contributors/code/scripts.md 为骨架完整整理 WordPress 官方脚本wp-*handle、第三方 vendor 脚本与 polyfill 脚本的注册清单并深入讲解如何借助wordpress/dependency-extraction-webpack-plugin实现「构建时不打包、运行时按依赖入队」的代码共享模式帮助你写出体积更小、与 WordPress 生态兼容的插件。WordPress 官方脚本wp-*handle全清单编辑器内置了大量 npm 包用于支撑编辑器的各类功能。插件开发者可以直接使用它们来创建块blocks、编辑器插件editor plugins或通用插件。这些脚本在 WordPress 站点上已预先注册插件只需在入队时声明对应 handle 即可。下表完整列出这些官方脚本的包名、handle 与用途来源docs/contributors/code/scripts.mdScript NameHandleDescriptionBlobwp-blobBlob 工具函数Block Librarywp-block-library编辑器块库Blockswp-blocks块创建相关 APIBlock Serialization Default Parserwp-block-serialization-default-parserWordPress 文档的默认块序列化解析器实现Block Serialization Spec Parserwp-block-serialization-spec-parserWordPress 文章的语法文件grammar.pegjsComponentswp-components用于构建通用 UI 元素的组件库Composewp-compose一组实用的高阶组件HOC集合Core Datawp-core-data简化对 WordPress 核心实体的访问与操作Datawp-data应用状态管理中枢服务于插件与 WordPress 本身Datewp-dateWordPress 日期模块Deprecatedwp-deprecated记录弃用提示日志的工具Domwp-domWordPress DOM 工具模块Dom Readywp-dom-ready在 DOM 加载完成后执行回调Editorwp-editorWordPress 编辑器的构建基块Edit Postwp-edit-postWordPress 编辑文章模块Elementwp-element基于 React 之上的抽象层Escape Htmlwp-escape-htmlHTML 转义工具Hookswp-hooks轻量高效的 JavaScript 事件管理器EventManagerHtml Entitieswp-html-entitiesWordPress HTML 实体工具I18Nwp-i18n客户端本地化国际化工具Is Shallow Equalwp-is-shallow-equal对两个对象或数组执行浅比较的函数Keycodeswp-keycodes按键码工具用于在onKeyDown等事件中检测按下的按键List Reusable blockswp-list-reusable-blocks为可复用块列表页添加导入/导出链接的包Pluginswp-pluginsWordPress 插件模块Redux Routinewp-redux-routine面向生成器协程的 Redux 中间件Rich Textwp-rich-text在 HTML/DOM 树与富文本值之间转换的辅助函数Shortcodewp-shortcodeWordPress 短代码模块Token Listwp-token-list可构造的纯 JavaScriptDOMTokenList实现支持非浏览器运行时URLwp-url操作 URL 的工具集合Viewportwp-viewport响应浏览器视口尺寸变化的模块Wordcountwp-wordcountWordPress 单词计数工具使用要点上述每个包在仓库packages/目录下都有独立源码与 README例如 packages/data/README.md 详细介绍了数据模块的 store 注册方式packages/components/README.md 列出了所有可用的 UI 组件。想要深入某个脚本的 API 时直接打开对应包的 README 即可。Vendor 脚本复用第三方库而不重复打包编辑器还依赖若干流行的第三方包。插件开发者同样可以直接使用这些脚本无需把它们打进自己的代码里——这能显著减小插件体积同时保证与编辑器使用完全相同的库版本。Script NameHandleDescriptionReactreact用于构建用户界面的 JavaScript 库React Domreact-domReact 的 DOM 与服务端渲染入口需与 React 搭配使用Momentmoment在 JavaScript 中解析、校验、操作与显示日期时间Lodashlodash提供通用编程任务工具函数的 JavaScript 库在实际项目中react、react-dom是块开发中最常被外部化的依赖构建工具会把import React from react解析为对全局React变量的引用而运行时由 WordPress 预先加载的 react 脚本提供。Polyfill 脚本补齐浏览器能力差异编辑器同样为某些旧浏览器可能缺失的特性提供了 polyfill。强烈建议直接使用主入口wp-polyfill它负责一次性加载下表所列的所有 polyfill无需你手动逐个注册Script NameHandleDescriptionBabel Polyfillwp-polyfill模拟完整的 ES2015 运行环境是加载以下所有附加 polyfill 的主脚本Fetch Polyfillwp-polyfill-fetch实现标准 Fetch 规范子集的 polyfillPromise Polyfillwp-polyfill-promise面向浏览器与 Node 的轻量 ES6 Promise polyfillFormdata Polyfillwp-polyfill-formdata按条件替换原生 FormData 实现的 polyfillNode Contains Polyfillwp-polyfill-node-containsNode.contains的 polyfillElement Closest Polyfillwp-polyfill-element-closest沿 DOM 树上溯返回与选择器匹配的最近元素从源码实现看wp-polyfill的加载不仅在 PHP 侧注册构建链路也会主动注入它在 packages/dependency-extraction-webpack-plugin/lib/index.js 中当检测到需要 regenerator 运行时代码例如使用了babel/runtime/regenerator时插件会自动把wp-polyfill加入当前入口的依赖列表源码中chunkStaticDeps.add( wp-polyfill )等逻辑出现在第 206-211、315、416-422 行。也就是说只要你的代码经过 babel 转译并使用了async/await生成的asset.php依赖里就会自动带上wp-polyfill无需手动干预。打包与代码共享让 webpack 输出依赖清单而非重复代码核心思路当你使用 webpack 之类的打包器时上述脚本都可以从产物中排除改由 WordPress 在运行时以脚本依赖script dependencies的形式提供。这正是wp_enqueue_script所支持的机制注册脚本时传入的第三个参数$deps就是 handle 数组WordPress 会自动保证这些依赖脚本先于你的脚本加载。dependency-extraction-webpack-plugin自动生成依赖清单手动维护依赖列表既繁琐又容易出错。packages/dependency-extraction-webpack-plugin/README.md 说明这个插件承担两个职责外部化externalize那些在 WordPress 站点上以共享脚本形式存在的依赖为每个入口生成一个asset 文件声明该入口需要哪些 WordPress 脚本或模块依赖并附带根据当前源码内容计算出的版本哈希。默认外部化映射插件默认处理以下模块请求request→ 全局变量 → 脚本 handleRequestGlobalScript handlebabel/runtime/regeneratorregeneratorRuntimewp-polyfillwordpress/*wp[*]wp-*jqueryjQueryjquerylodash-eslodashlodashlodashlodashlodashmomentmomentmomentreact-domReactDOMreact-domreactReactreact从上表可以看出上文中「WordPress 官方脚本」「Vendor 脚本」两张清单正是这套默认映射的落地依据wordpress/*系列包会被解析为wp.*全局命名空间并映射为wp-*handlereact、lodash、moment则分别映射为同名 handle。如果这些映射不能满足需求还可以通过requestToExternal把请求映射为全局变量名与requestToHandle把同一请求映射为entrypoint.asset.php中的 handle 字符串两个配置函数自定义优先级高于默认处理见 lib/index.js 第 59-76 行的处理逻辑先尝试requestToExternalModule再尝试requestToExternal。产物形态entrypoint.asset.php假设源码入口如下// Source file entrypoint.js import { Component } from react;webpack 会输出output/entrypoint.js打包后的 JS同时生成同名的output/entrypoint.asset.php?php return array(dependencies array(react), version dd4c2dc50d046ed9d4c063a7ca95702f);asset 文件名由输出的 JS 文件名推导例如配置output.filename: bunny-plugin-[name].min.js时entrypoint入口会生成output/bunny-plugin-entrypoint.min.asset.php。version是基于入口文件内容含抽取出的样式计算的唯一哈希可用于缓存失效控制。常用配置项选项类型默认值说明outputFormatstringphp生成的 asset 文件格式可选php或jsonoutputFilenamestring | functionnull生成的 asset 文件名接受与 webpackoutput.filename相同的值combineAssetsbooleanfalse为true时把所有入口的资产信息合并到一个assets.(json|php)文件中combinedOutputFilestringnull仅配合combineAssets使用指定合并文件的自定义输出名可相对输出目录useDefaultsbooleantrue设为false可禁用默认的请求处理injectPolyfillbooleanfalse强制在每个入口的依赖列表中加入wp-polyfill等价于在每个入口执行import wordpress/polyfill;脚本模块模式下不可用externalizedReportboolean | stringfalse以 JSON 数组形式输出全部外部化依赖报告可指定文件名或设为true输出到默认的externalized-dependencies.jsonrequestToExternalfunction—自定义模块请求 → 全局变量的映射脚本模式requestToExternalModulefunction—自定义脚本模块请求 → 脚本模块 ID 的映射仅模块模式返回true表示请求与外部模块同名requestToHandlefunction—自定义模块请求 → 脚本 handle 的映射脚本模式在 webpack 中使用// webpack.config.js const DependencyExtractionWebpackPlugin require( wordpress/dependency-extraction-webpack-plugin ); module.exports { // …snip plugins: [ new DependencyExtractionWebpackPlugin() ], };注意不支持多实例。如果你想在wordpress/scripts提供的默认 webpack 配置基础上扩展并自行添加该插件必须先把默认实例过滤掉const defaultConfig require( wordpress/scripts/config/webpack.config ); const webpackConfig { ...defaultConfig, plugins: [ ...defaultConfig.plugins.filter( ( plugin ) plugin.constructor.name ! DependencyExtractionWebpackPlugin ), new DependencyExtractionWebpackPlugin( { injectPolyfill: true, requestToExternal( request ) { /* My externals */ }, } ), ], };PHP 端动态读取依赖入队构建之后PHP 侧无需硬编码依赖数组直接读取生成的 asset 文件即可$script_path path/to/script.js; $script_asset_path path/to/script.asset.php; $script_asset file_exists( $script_asset_path ) ? require( $script_asset_path ) : array( dependencies array(), version filemtime( $script_path ) ); $script_url plugins_url( $script_path, __FILE__ ); wp_enqueue_script( script, $script_url, $script_asset[dependencies], $script_asset[version] );当 asset 文件不存在时退化为使用filemtime作为版本号保证开发场景下的缓存正确性。脚本模块Script Modules支持该插件第 5 版起支持模块打包。启用 webpack 的output.module后插件会改用 WordPress Script Modules API 生成资产文件。当前默认处理的脚本模块请求为wordpress/interactivity目前唯一的 WordPress 官方脚本模块。模块模式下使用requestToExternalModule替代requestToExternal并且injectPolyfill不可用。需要说明的是Script Modules 支持目前仍被视为实验性特性见 packages/dependency-extraction-webpack-plugin/README.md 中的 Warning 标注。wordpress/scripts零配置集成默认插件一键安装npm install wordpress/scripts --save-dev该包要求长期支持Active LTS 或 Maintenance LTS状态的 Node.js 版本。以当前仓库 packages/scripts/package.json 为例其engines字段声明为node: ^22.22.2 || ^24.15.0 || 26.0.0、npm: 8.19.2说明版本约束会随仓库演进请以你安装版本的实际声明为准。推荐的 package.json 脚本配置该包暴露wp-scripts二进制bin字段指向./bin/wp-scripts.js通常不建议直接调用而是在package.json的scripts段配置{ scripts: { build: wp-scripts build, check-engines: wp-scripts check-engines, check-licenses: wp-scripts check-licenses, format: wp-scripts format, lint:css: wp-scripts lint-style, lint:js: wp-scripts lint-js, lint:md:docs: wp-scripts lint-md-docs, lint:pkg-json: wp-scripts lint-pkg-json, packages-update: wp-scripts packages-update, plugin-zip: wp-scripts plugin-zip, start: wp-scripts start, test:e2e: wp-scripts test-e2e, test:unit: wp-scripts test-unit-js } }完整的脚本说明见 packages/scripts/README.md。其中与本文主题最相关的两点build/start命令在幕后使用 webpack其默认配置packages/scripts/config/webpack.config已内置wordpress/dependency-extraction-webpack-plugin开箱即用地完成 WordPress 脚本的外部化与依赖清单生成常用构建参数包括--webpack-bundle-analyzer可视化产物体积、--webpack-copy-php把src下所有 PHP 文件复制到输出目录、--webpack-no-externals禁用依赖生成并移除默认外部化、--source-path自定义源码目录默认src、--output-path自定义输出目录默认buildpackages-update提供--dist-tag参数默认latest可指定安装某个 WordPress 大版本对应的 npm 依赖版本例如wp-scripts packages-update --dist-tagwp-6.0便于本地测试。关于如何用 ESNext 语法搭建块开发环境官方建议进一步阅读 docs/getting-started/fundamentals/javascript-in-the-block-editor.md。自定义 webpack 配置build/start会优先使用项目根目录下你提供的webpack.config.js或webpack.config.babel.js也可通过--config显式指定。扩展默认配置的标准做法是require官方配置并用展开运算符合并const toml require( toml ); const defaultConfig require( wordpress/scripts/config/webpack.config ); module.exports { ...defaultConfig, module: { ...defaultConfig.module, rules: [ ...defaultConfig.module.rules, { test: /.toml/, type: json, parser: { parse: toml.parse, }, }, ], }, };采用这种方案时有两点提醒来自 packages/scripts/README.md应继续使用wp-scripts的start/build命令而非直接调用 webpack后续版本可能调整内置的 webpack/Babel 插件与默认配置升级前请务必阅读该包的 CHANGELOG。小结一条完整的依赖共享工作流将上文串联起来一个 Gutenberg 插件正确的脚本使用路径是了解清单从本文的 WordPress 脚本表、Vendor 脚本表、Polyfill 脚本表即原文档 docs/contributors/code/scripts.md 的完整内容确认你要用的 handle源码中正常 import在 JS 里直接import { ... } from wordpress/data、import React from react无需关心打包细节构建时外部化wordpress/scripts build内置的dependency-extraction-webpack-plugin自动把上述依赖从产物中剔除并生成*.asset.php依赖清单wp-polyfill等运行时依赖也会按需自动注入运行时入队PHP 端requireasset 文件把dependencies与version直接传给wp_enqueue_scriptWordPress 负责按顺序加载所有共享脚本。这套「构建时排除、运行时共享」的模式既避免了插件重复打包 React、Lodash 等重型库导致的体积膨胀也保证了与编辑器运行时环境的版本一致性是 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），仅供参考
Gutenberg 脚本注册清单与依赖共享指南：WordPress 插件开发者如何正确使用编辑器内置脚本
Gutenberg 脚本注册清单与依赖共享指南WordPress 插件开发者如何正确使用编辑器内置脚本【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenbergGutenbergWordPress 块编辑器项目为插件开发者提供了一套完整的内置脚本体系覆盖从块创建、UI 组件、数据状态管理到国际化等全部能力。本文以仓库文档 docs/contributors/code/scripts.md 为骨架完整整理 WordPress 官方脚本wp-*handle、第三方 vendor 脚本与 polyfill 脚本的注册清单并深入讲解如何借助wordpress/dependency-extraction-webpack-plugin实现「构建时不打包、运行时按依赖入队」的代码共享模式帮助你写出体积更小、与 WordPress 生态兼容的插件。WordPress 官方脚本wp-*handle全清单编辑器内置了大量 npm 包用于支撑编辑器的各类功能。插件开发者可以直接使用它们来创建块blocks、编辑器插件editor plugins或通用插件。这些脚本在 WordPress 站点上已预先注册插件只需在入队时声明对应 handle 即可。下表完整列出这些官方脚本的包名、handle 与用途来源docs/contributors/code/scripts.mdScript NameHandleDescriptionBlobwp-blobBlob 工具函数Block Librarywp-block-library编辑器块库Blockswp-blocks块创建相关 APIBlock Serialization Default Parserwp-block-serialization-default-parserWordPress 文档的默认块序列化解析器实现Block Serialization Spec Parserwp-block-serialization-spec-parserWordPress 文章的语法文件grammar.pegjsComponentswp-components用于构建通用 UI 元素的组件库Composewp-compose一组实用的高阶组件HOC集合Core Datawp-core-data简化对 WordPress 核心实体的访问与操作Datawp-data应用状态管理中枢服务于插件与 WordPress 本身Datewp-dateWordPress 日期模块Deprecatedwp-deprecated记录弃用提示日志的工具Domwp-domWordPress DOM 工具模块Dom Readywp-dom-ready在 DOM 加载完成后执行回调Editorwp-editorWordPress 编辑器的构建基块Edit Postwp-edit-postWordPress 编辑文章模块Elementwp-element基于 React 之上的抽象层Escape Htmlwp-escape-htmlHTML 转义工具Hookswp-hooks轻量高效的 JavaScript 事件管理器EventManagerHtml Entitieswp-html-entitiesWordPress HTML 实体工具I18Nwp-i18n客户端本地化国际化工具Is Shallow Equalwp-is-shallow-equal对两个对象或数组执行浅比较的函数Keycodeswp-keycodes按键码工具用于在onKeyDown等事件中检测按下的按键List Reusable blockswp-list-reusable-blocks为可复用块列表页添加导入/导出链接的包Pluginswp-pluginsWordPress 插件模块Redux Routinewp-redux-routine面向生成器协程的 Redux 中间件Rich Textwp-rich-text在 HTML/DOM 树与富文本值之间转换的辅助函数Shortcodewp-shortcodeWordPress 短代码模块Token Listwp-token-list可构造的纯 JavaScriptDOMTokenList实现支持非浏览器运行时URLwp-url操作 URL 的工具集合Viewportwp-viewport响应浏览器视口尺寸变化的模块Wordcountwp-wordcountWordPress 单词计数工具使用要点上述每个包在仓库packages/目录下都有独立源码与 README例如 packages/data/README.md 详细介绍了数据模块的 store 注册方式packages/components/README.md 列出了所有可用的 UI 组件。想要深入某个脚本的 API 时直接打开对应包的 README 即可。Vendor 脚本复用第三方库而不重复打包编辑器还依赖若干流行的第三方包。插件开发者同样可以直接使用这些脚本无需把它们打进自己的代码里——这能显著减小插件体积同时保证与编辑器使用完全相同的库版本。Script NameHandleDescriptionReactreact用于构建用户界面的 JavaScript 库React Domreact-domReact 的 DOM 与服务端渲染入口需与 React 搭配使用Momentmoment在 JavaScript 中解析、校验、操作与显示日期时间Lodashlodash提供通用编程任务工具函数的 JavaScript 库在实际项目中react、react-dom是块开发中最常被外部化的依赖构建工具会把import React from react解析为对全局React变量的引用而运行时由 WordPress 预先加载的 react 脚本提供。Polyfill 脚本补齐浏览器能力差异编辑器同样为某些旧浏览器可能缺失的特性提供了 polyfill。强烈建议直接使用主入口wp-polyfill它负责一次性加载下表所列的所有 polyfill无需你手动逐个注册Script NameHandleDescriptionBabel Polyfillwp-polyfill模拟完整的 ES2015 运行环境是加载以下所有附加 polyfill 的主脚本Fetch Polyfillwp-polyfill-fetch实现标准 Fetch 规范子集的 polyfillPromise Polyfillwp-polyfill-promise面向浏览器与 Node 的轻量 ES6 Promise polyfillFormdata Polyfillwp-polyfill-formdata按条件替换原生 FormData 实现的 polyfillNode Contains Polyfillwp-polyfill-node-containsNode.contains的 polyfillElement Closest Polyfillwp-polyfill-element-closest沿 DOM 树上溯返回与选择器匹配的最近元素从源码实现看wp-polyfill的加载不仅在 PHP 侧注册构建链路也会主动注入它在 packages/dependency-extraction-webpack-plugin/lib/index.js 中当检测到需要 regenerator 运行时代码例如使用了babel/runtime/regenerator时插件会自动把wp-polyfill加入当前入口的依赖列表源码中chunkStaticDeps.add( wp-polyfill )等逻辑出现在第 206-211、315、416-422 行。也就是说只要你的代码经过 babel 转译并使用了async/await生成的asset.php依赖里就会自动带上wp-polyfill无需手动干预。打包与代码共享让 webpack 输出依赖清单而非重复代码核心思路当你使用 webpack 之类的打包器时上述脚本都可以从产物中排除改由 WordPress 在运行时以脚本依赖script dependencies的形式提供。这正是wp_enqueue_script所支持的机制注册脚本时传入的第三个参数$deps就是 handle 数组WordPress 会自动保证这些依赖脚本先于你的脚本加载。dependency-extraction-webpack-plugin自动生成依赖清单手动维护依赖列表既繁琐又容易出错。packages/dependency-extraction-webpack-plugin/README.md 说明这个插件承担两个职责外部化externalize那些在 WordPress 站点上以共享脚本形式存在的依赖为每个入口生成一个asset 文件声明该入口需要哪些 WordPress 脚本或模块依赖并附带根据当前源码内容计算出的版本哈希。默认外部化映射插件默认处理以下模块请求request→ 全局变量 → 脚本 handleRequestGlobalScript handlebabel/runtime/regeneratorregeneratorRuntimewp-polyfillwordpress/*wp[*]wp-*jqueryjQueryjquerylodash-eslodashlodashlodashlodashlodashmomentmomentmomentreact-domReactDOMreact-domreactReactreact从上表可以看出上文中「WordPress 官方脚本」「Vendor 脚本」两张清单正是这套默认映射的落地依据wordpress/*系列包会被解析为wp.*全局命名空间并映射为wp-*handlereact、lodash、moment则分别映射为同名 handle。如果这些映射不能满足需求还可以通过requestToExternal把请求映射为全局变量名与requestToHandle把同一请求映射为entrypoint.asset.php中的 handle 字符串两个配置函数自定义优先级高于默认处理见 lib/index.js 第 59-76 行的处理逻辑先尝试requestToExternalModule再尝试requestToExternal。产物形态entrypoint.asset.php假设源码入口如下// Source file entrypoint.js import { Component } from react;webpack 会输出output/entrypoint.js打包后的 JS同时生成同名的output/entrypoint.asset.php?php return array(dependencies array(react), version dd4c2dc50d046ed9d4c063a7ca95702f);asset 文件名由输出的 JS 文件名推导例如配置output.filename: bunny-plugin-[name].min.js时entrypoint入口会生成output/bunny-plugin-entrypoint.min.asset.php。version是基于入口文件内容含抽取出的样式计算的唯一哈希可用于缓存失效控制。常用配置项选项类型默认值说明outputFormatstringphp生成的 asset 文件格式可选php或jsonoutputFilenamestring | functionnull生成的 asset 文件名接受与 webpackoutput.filename相同的值combineAssetsbooleanfalse为true时把所有入口的资产信息合并到一个assets.(json|php)文件中combinedOutputFilestringnull仅配合combineAssets使用指定合并文件的自定义输出名可相对输出目录useDefaultsbooleantrue设为false可禁用默认的请求处理injectPolyfillbooleanfalse强制在每个入口的依赖列表中加入wp-polyfill等价于在每个入口执行import wordpress/polyfill;脚本模块模式下不可用externalizedReportboolean | stringfalse以 JSON 数组形式输出全部外部化依赖报告可指定文件名或设为true输出到默认的externalized-dependencies.jsonrequestToExternalfunction—自定义模块请求 → 全局变量的映射脚本模式requestToExternalModulefunction—自定义脚本模块请求 → 脚本模块 ID 的映射仅模块模式返回true表示请求与外部模块同名requestToHandlefunction—自定义模块请求 → 脚本 handle 的映射脚本模式在 webpack 中使用// webpack.config.js const DependencyExtractionWebpackPlugin require( wordpress/dependency-extraction-webpack-plugin ); module.exports { // …snip plugins: [ new DependencyExtractionWebpackPlugin() ], };注意不支持多实例。如果你想在wordpress/scripts提供的默认 webpack 配置基础上扩展并自行添加该插件必须先把默认实例过滤掉const defaultConfig require( wordpress/scripts/config/webpack.config ); const webpackConfig { ...defaultConfig, plugins: [ ...defaultConfig.plugins.filter( ( plugin ) plugin.constructor.name ! DependencyExtractionWebpackPlugin ), new DependencyExtractionWebpackPlugin( { injectPolyfill: true, requestToExternal( request ) { /* My externals */ }, } ), ], };PHP 端动态读取依赖入队构建之后PHP 侧无需硬编码依赖数组直接读取生成的 asset 文件即可$script_path path/to/script.js; $script_asset_path path/to/script.asset.php; $script_asset file_exists( $script_asset_path ) ? require( $script_asset_path ) : array( dependencies array(), version filemtime( $script_path ) ); $script_url plugins_url( $script_path, __FILE__ ); wp_enqueue_script( script, $script_url, $script_asset[dependencies], $script_asset[version] );当 asset 文件不存在时退化为使用filemtime作为版本号保证开发场景下的缓存正确性。脚本模块Script Modules支持该插件第 5 版起支持模块打包。启用 webpack 的output.module后插件会改用 WordPress Script Modules API 生成资产文件。当前默认处理的脚本模块请求为wordpress/interactivity目前唯一的 WordPress 官方脚本模块。模块模式下使用requestToExternalModule替代requestToExternal并且injectPolyfill不可用。需要说明的是Script Modules 支持目前仍被视为实验性特性见 packages/dependency-extraction-webpack-plugin/README.md 中的 Warning 标注。wordpress/scripts零配置集成默认插件一键安装npm install wordpress/scripts --save-dev该包要求长期支持Active LTS 或 Maintenance LTS状态的 Node.js 版本。以当前仓库 packages/scripts/package.json 为例其engines字段声明为node: ^22.22.2 || ^24.15.0 || 26.0.0、npm: 8.19.2说明版本约束会随仓库演进请以你安装版本的实际声明为准。推荐的 package.json 脚本配置该包暴露wp-scripts二进制bin字段指向./bin/wp-scripts.js通常不建议直接调用而是在package.json的scripts段配置{ scripts: { build: wp-scripts build, check-engines: wp-scripts check-engines, check-licenses: wp-scripts check-licenses, format: wp-scripts format, lint:css: wp-scripts lint-style, lint:js: wp-scripts lint-js, lint:md:docs: wp-scripts lint-md-docs, lint:pkg-json: wp-scripts lint-pkg-json, packages-update: wp-scripts packages-update, plugin-zip: wp-scripts plugin-zip, start: wp-scripts start, test:e2e: wp-scripts test-e2e, test:unit: wp-scripts test-unit-js } }完整的脚本说明见 packages/scripts/README.md。其中与本文主题最相关的两点build/start命令在幕后使用 webpack其默认配置packages/scripts/config/webpack.config已内置wordpress/dependency-extraction-webpack-plugin开箱即用地完成 WordPress 脚本的外部化与依赖清单生成常用构建参数包括--webpack-bundle-analyzer可视化产物体积、--webpack-copy-php把src下所有 PHP 文件复制到输出目录、--webpack-no-externals禁用依赖生成并移除默认外部化、--source-path自定义源码目录默认src、--output-path自定义输出目录默认buildpackages-update提供--dist-tag参数默认latest可指定安装某个 WordPress 大版本对应的 npm 依赖版本例如wp-scripts packages-update --dist-tagwp-6.0便于本地测试。关于如何用 ESNext 语法搭建块开发环境官方建议进一步阅读 docs/getting-started/fundamentals/javascript-in-the-block-editor.md。自定义 webpack 配置build/start会优先使用项目根目录下你提供的webpack.config.js或webpack.config.babel.js也可通过--config显式指定。扩展默认配置的标准做法是require官方配置并用展开运算符合并const toml require( toml ); const defaultConfig require( wordpress/scripts/config/webpack.config ); module.exports { ...defaultConfig, module: { ...defaultConfig.module, rules: [ ...defaultConfig.module.rules, { test: /.toml/, type: json, parser: { parse: toml.parse, }, }, ], }, };采用这种方案时有两点提醒来自 packages/scripts/README.md应继续使用wp-scripts的start/build命令而非直接调用 webpack后续版本可能调整内置的 webpack/Babel 插件与默认配置升级前请务必阅读该包的 CHANGELOG。小结一条完整的依赖共享工作流将上文串联起来一个 Gutenberg 插件正确的脚本使用路径是了解清单从本文的 WordPress 脚本表、Vendor 脚本表、Polyfill 脚本表即原文档 docs/contributors/code/scripts.md 的完整内容确认你要用的 handle源码中正常 import在 JS 里直接import { ... } from wordpress/data、import React from react无需关心打包细节构建时外部化wordpress/scripts build内置的dependency-extraction-webpack-plugin自动把上述依赖从产物中剔除并生成*.asset.php依赖清单wp-polyfill等运行时依赖也会按需自动注入运行时入队PHP 端requireasset 文件把dependencies与version直接传给wp_enqueue_scriptWordPress 负责按顺序加载所有共享脚本。这套「构建时排除、运行时共享」的模式既避免了插件重复打包 React、Lodash 等重型库导致的体积膨胀也保证了与编辑器运行时环境的版本一致性是 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），仅供参考
