脚本模块：允许模块依赖于现有的WordPress脚本

[Jonsrell公司]

脚本模块不能依赖现有脚本，例如wp-url公司,wp-i18n型，或wp-api-蚀刻.

脚本模块应该能够利用现有脚本中可用的功能。

[Jonsrell公司]

我花了很多时间考虑这个问题，我会分享我的想法。首先是一些概念和约束，然后是实施思路。我欢迎提问、挑战和反馈。

---

向后兼容性非常重要。因此，在可预见的未来，所有当前可用的脚本都需要保持可用。

许多现有脚本在加载时都会产生副作用，例如存储的初始化。它们还可能具有在复制时行为不符合预期的状态或单例。请参见​古腾堡发行号8981了解详细信息。

脚本通过将变量附加到窗口对象来公开它们，可以通过全局命名空间访问它们。例如。wp-api-蚀刻可通过以下方式访问window.wp.api获取.

脚本可以通过以下方式使用模块​“动态导入”（`import（）`）.导入（）是一个异步函数（返回一个承诺)这意味着使用模块的脚本必然是异步的。

只要计算顺序正确，模块就可以轻松访问脚本功能(window.wp.api获取在wp-api-蚀刻已获取并评估脚本）。

---

鉴于

• 脚本需要保留。
• 脚本不应重复。
• 模块可以通过全局变量轻松使用脚本。
• 使用模块的脚本需要承诺。

一些可能的方法：

首先，模块能够取决于脚本。模块可以通过全局变量访问脚本，所以我们只需要依赖项来正确地将脚本排队。这应该是一个简单的更改，但牺牲了开发人员的经验。人们需要知道他们是在使用模块还是脚本，他们需要包括正确的依赖项并以正确的方式使用它：导入模块依赖项，通过全局使用脚本依赖项。

//我们的依赖模块有一个复杂的依赖项数组：$dependencies=数组(“@wordpress/interactivity”，//不知怎的，我们声明了一个脚本依赖项（此表单当前无效）数组（'import'=>'script'，'id'=>'wp-api-fetch'），);//在依赖模块中，我们混合了导入和全局：从“@wordpress/interactive”导入*作为交互性；const apiFetch=window.wp.apiFetch；

另一种方法是使用代理模块导出脚本提供的全局变量。代理模块仍然需要正确排队关联的脚本-存在模块->脚本依赖关系-但这将针对核心脚本而不是公共脚本进行处理，从而保持模块和脚本之间的明确分离。这里的开发人员体验得到了改进，不再依赖于某些脚本和模块，模块只依赖于模块，开发人员不需要访问全局变量，他们只使用进口.

以下是一些代理模块的外观：

//wp-api-fetch脚本的模块包装器//@wordpress/api-fetch包使用默认导出const apiFetch=window.wp.apiFetch；导出默认apiFetch；//wp-url脚本的模块包装器//@wordpress/url包使用命名导出export const addQueryArgs=window.wp.url.addQueryArmsexport const getPath=窗口.wp.url.getPath导出常量isURL=window.wp.url.isURL//等等…

使用这些代理模块的优点是改善了开发人员的体验：

//依赖模块的依赖关系更简单：$dependencies=数组（“@wordpress/interactivity”，“@wordbress/api-fetch”）；//在从属模块中，我们只使用导入：从“@wordpress/api-fetch”导入apiFetch；从“@wordpress/url”导入{addQueryArgs}；

代理模块方法还提供了一种潜在的增强功能。WordPress可以包含代理模块和完整模块版本的脚本。在准备模块时，我们可以检查脚本是否已入队。如果脚本已排队，则使用脚本支持的代理模块。如果脚本没有排队，我们使用完整的模块版本，并且脚本不需要排队。这是一个脚本可以保持可用的路径，但在很大程度上被模块替换，而不会牺牲向后兼容性。

模块代理方法有一些缺点，主要是我们对代理模块有额外的请求。一种解决方案是在代理模块的关联模块之后立即内联打印代理模块（如果尚未打印，则在导入映射之后）。代理模块本质上是导出列表，因此通常可能很小。

另一个潜在的缺点是，该提案侧重于核心脚本，而不是扩展程序。如果该方法工作良好，我们可以考虑为扩展器添加适当的扩展点，以遵循相同的方法。

[吉奥罗牌手表]

感谢您分享最初的想法，@jonsurerl。

人们需要知道他们是在使用模块还是脚本，他们需要包括正确的依赖项并以正确的方式使用它：导入模块依赖项，通过全局使用脚本依赖项。

这种方法是手动的，因为我们没有任何自动检测方法水处理全局变量并将其转换为依赖项列表，即使在使用@wordpress/脚本工具。

另一个与提议的方法无关的挑战是，确保脚本和导入映射以正确的顺序打印，以便浏览器能够正确地解决所有问题。目前，ES模块和常规脚本对自己一无所知。

[Jonsrell公司]

回复Jonsrell公司:

模块代理方法有一些缺点，主要是我们对代理模块有额外的请求。一种解决方案是内联打印代理模块…

我认为不可能打印内联导出的模块，因为以后无法引用它，它没有其他模块可以导入的名称或URL。

[Jonsrell公司]

代理模块方法的一个问题是脚本执行的顺序。例如，建议的代理模块@wordpress/a11年对wp-a11年脚本。wp-a11y型公开所需的全局变量，因此必须在之前执行 @文字新闻/a11y.

我做了一些测试和研究，页面上打印的脚本的顺序似乎不会有问题。总之，如果脚本不是异步或推迟（默认情况下不是），模块不是异步（默认情况下不是），它们将按我们要求的顺序执行。

---

排队脚本打印为脚本标签，无异步或推迟属性。​这意味着它们“在浏览器继续解析页面之前立即被提取和执行” 排队的脚本将按照它们在页面上出现的顺序进行提取和执行。

模块(<script type=“模块”>)​始终被视为“defer”，这意味着：

脚本意味着在解析文档后执行。

如果我们把这些放在一起，我们可以看到脚本是在解析继续之前执行的，而模块是在文档解析之后执行的。这意味着模块可以独立于页面上脚本标记的顺序依赖于脚本，因为脚本在模块之前执行。

Trac票：https://core.trac.wordpress.org/ticket/60647

[Jonsrell公司]

我花了更多的时间思考这个问题。我看到两个选项：

第一个选项是允许模块依赖于脚本。这似乎是一个相当简单和安全的更改。在可预见的未来，脚本将继续作为脚本存在。模块将使用脚本，例如。window.wp.api获取。我们可以调整现有工具来帮助实现这一点，这样人们可以继续编写代码，如从“@wordpress/api-fetch”导入apiFetch并使用预期的依赖项和结果进行编译(wp-api-蚀刻 脚本依赖关系和const apiFetch=window.wp.apiFetch).

第一个选项的缺点是，它没有提供从脚本到模块的转换策略，并且我们牺牲了模块的一些潜在好处，例如延迟或有条件/按需加载模块。

---

另一种方法是以某种方式将脚本公开为模块。WordPress中可用的大多数现代脚本都是作为模块编写的，然后通过webpack编译为“库”-它们将导出内容作为全局值公开，例如。window.wp.api获取.

我在前面的注释中描述的代理模块提供了一种机制，在这种机制中，可以在存在时使用脚本依赖项，也可以在必要时按需使用模块。然而，代理模块在大多数方面都更糟糕：它们的开销大多只用于使用模块或脚本。如果我们可以确定某个给定的脚本没有在页面上使用，从而可以在没有代理的情况下直接使用其相应的模块，那么好处就来了。如果我们不能满足这些条件，或者只在极为罕见的情况下满足它们，那么我看不出采取这种方法的理由。

我将描述一些场景来解释我的想法：

• wp-api-蚀刻脚本已存在。@wordpress/api-回迁模块不是依赖项。行为没有改变。
• wp-api-蚀刻脚本已存在。@wordpress/api-回迁模块是一个依赖项。在这种情况下@wordpress/api-回迁应指向代理模块，以便wp-api-蚀刻脚本作为模块使用，而不是复制。
• wp-api-蚀刻脚本不存在。@wordpress/api-回迁模块是一个依赖项。在这种情况下@wordpress/api-回迁应该指向完整@wordpress/api-回迁模块以利用ES模块的优点。

这样做的困难在于，当我们打印模块importmap时，要知道是否会将给定的脚本添加到页面中，这时我们必须提供指向代理模块或实际模块的URL。导入地图必须在任何脚本类型=模块或链接rel=模块加载标签。理想情况下，模块预加载和导入映射会在页面的早期打印出来，因此，如果脚本排队较晚，则此信息可能不可用。​这是模块API和经典主题的问题.

也许代理模块总是可以与经典主题一起使用，但基于块的主题可以使用这种使用代理或实际模块的策略，这取决于脚本是否排队。

[Jonsrell公司]

在尝试将某些脚本用作模块时，还有一个额外的困难。​一些脚本依赖于作为内联脚本的特殊初始化。在不牺牲模块的某些优点的情况下，没有明显的方法可以用模块做到这一点。

例如，wp-api-蚀刻脚本使用如下内联脚本进行初始化：

水处理.api获取.非中间件 = 水处理.api获取.创建非ceMiddleware( 现时 );
//…更多设置代码

在哪里？现时是服务器为REST API生成的随机数。这可以通过使用与模块相同的方式来实现脚本类型=模块标记和导入@wordpress/api-回迁，但模块是必需的，这是不可取的。理想情况下，只有在需要时才下载和初始化模块。

更好的解决方案可能是修改wp-api-蚀刻因此，服务器不是通过注入命令代码来设置它，而是搜索一些全局变量，并在必要时执行自己的设置/初始化。

[阿佐兹]

回复Jonsrell公司:

第一个选项是允许模块依赖于脚本。这似乎是一个相当简单和安全的更改。

大+1。认为模块和“普通、老式”脚本的任何“混合”都应该保持在最低限度，而且处理得越简单越好。

第一个选项的缺点是，它没有提供从脚本到模块的转换策略，并且我们牺牲了模块的一些潜在好处，例如延迟或有条件/按需加载模块。

坦率地说，我不确定WP老式脚本是否可以在许多（大多数？）情况下转换为模块。这将破坏依赖插件添加的任何（旧式）脚本的原因。因此，现在认为这是一个没有问题的问题，而且可能不会在很长一段时间内出现，如果有可能的话。

似乎前进的道路是弃用老式脚本并将其替换为模块，然后在插件排队时加载它们。（当然，要做到这一点，模块必须能够与老式脚本共存，并与之协同工作。这可能会很棘手。但让我们看看何时实现。）

[卡布拉沃伯纳尔]

回复阿佐兹:

似乎前进的道路是弃用老式脚本并将其替换为模块，然后在插件排队时加载它们。（当然，要做到这一点，模块必须能够与老式脚本共存，并与之协同工作。这可能会很棘手。但让我们看看何时实现。）

我们可以先将此解决方案的POC应用于最常用的解决方案吗？

仅应用于18亿欧元,api提取或核心数据据我所知，社区也要求在前端使用核心数据，这也是“更新它”以兼容前端和模块的原因。

[你知道riad]

我们已经和@jonsurerl讨论了这个问题，虽然没有解决方案，但我想在这里补充一些意见。

首先，我实际上根本不相信我们应该允许模块依赖于脚本（或者使用脚本）。我不认为现有脚本的使用卡太大。我确实看到人们想要使用apiFetch或国际化（可能与wp-i18n不同），日期可能是，但这些脚本都相当小。

我认为出于不同的原因尝试在模块中使用脚本可能是错误的：

• 许多这样的脚本都是使用上下文内联脚本在服务器端初始化的。如果我在编辑器或仪表板中加载wp-api-fetch，我将不会得到相同的内联脚本。对于模块，情况正好相反，模块总是相同的。就体系结构而言，模块的这个属性是一件好事（服务器和客户端之间的分离），使模块依赖于脚本将很困难（要使用哪些内联脚本），并产生使模块依赖上下文的问题。
• 许多脚本都有子依赖项：polyfill，不确定模块是否需要所有这些历史记录。
• 添加脚本作为模块的依赖项，这意味着即使不需要模块（稍后将异步加载），这些脚本也将始终打印在页面中，这意味着模块的主要卖点变为静音。我们会开枪打自己的脚。

由于这些原因，我认为不值得尝试在模块中加载脚本。我认为我们最好尝试使用构建脚本为一些选定的包创建脚本和模块。我甚至可以看到脚本和模块版本之间的一些差异。例如，配置翻译的方式不应该与wp-i18n相同，我们必须加载上下文翻译（根据需要延迟加载它们，而不是在服务器端打印它们…）

虽然这并没有带来解决方案，但我认为我这里最好的建议是不要试图以通用的方式来解决这个问题，而应该专注于具体的用途。我个人认为（从一开始）能够在脚本中使用模块（延迟加载模块）更有价值。例如，我经常提到的一个非常具体的用途是能够在编辑器中为代码视图加载“代码镜像”模块。我希望editPost能够做到导入（“@wordpress/codemirror”）需要时。

也许我们还可以尝试使用其他的用例，但我认为在解决特定的用例之前，我们不会提供通用的解决方案。该解决方案可以从实验性/私有API开始。。。

[Jonsrell公司]

@我对为模块所需的功能添加新模块的方法有一些疑问。让我们来看一个api获取模块作为一个示例，人们已经要求展示模块的挑战。

这个wp-api-蚀刻这个脚本依赖于一些命令性代码来设置，以便在WordPress中使用，这是我们需要解决的问题。在其模块版本中，我们还可能改进其他方面。

模块版本会是什么样子？它是否试图为了熟悉而维护相同的API？这对@wordpress/api-回迁已经包含模块和commonjs构建的包？现代api取模块版本会有新的包吗？发布一个具有突破性变化的新主要版本将是npm生态系统向前发展的一个好方法，但这是否意味着对wp-api-蚀刻脚本？如何独立于模块版本维护脚本？

明确地说，我不反对这种做法。我很喜欢它提供了一种将更现代的模块从遗留脚本中分离出来的方法，并提供了一个从头开始的机会，但我确实想探讨它提出的一些困难问题。

---

我个人认为（从一开始）能够在脚本中使用模块（延迟加载模块）更有价值。

这可能足以满足其自身的要求。如果我们想实现这一点，我认为这项工作将与允许在另一个方向上依赖分开。

[Jonsrell公司]

我同意@youknowriad的观点，我们应该根据需要逐步引入模块，而不需要将脚本中的任何内容迁移到模块中。

我目前正在研究迁移的概念验证api获取模块的功能。我希望它的API基本保持不变，这样人们就不必学习新的API。构建和维护模块将带来另一系列挑战。

api获取也是一个很好的探索模块，因为它在WordPress中有命令式配置，目前由wp_add_inline_script（wp_add_inline_script）。我认为模块需要一个接口来将配置从服务器传递到客户端，但模块应该能够按需读取数据，而不是当前使用的命令式脚本。​PR#6433（目前正在进行中）包含引入过滤器的方法脚本模块ta{$module_id}可用于将数据附加到将在DOM中序列化为JSON的对象，以便模块读取。

将print_script_module_data函数添加到WP_script_Modules类。

注册钩子以调用此函数wp_脚垫和管理员打印脚注脚本.

​参见品牌/核心提案和​古腾堡公共关系.

Trac票：https://core.trac.wordpress.org/ticket/60647

[奥格勒克勒]

在Beta 1之前，我们还有3个小时的时间等待提交冻结，看起来这张票不会及时进入Trunk。我正在重新安排到下一个里程碑。如果你正在努力工作，并且即将合并，请将其返回并完成工作。

[Jonsrell公司]

回复你知道riad:

我个人认为（从一开始）能够在脚本中使用模块（延迟加载模块）更有价值。例如，我经常提到的一个非常具体的用途是能够在编辑器中为代码视图加载“代码镜像”模块。我希望editPost能够导入（“@wordpress/codemirror”）需要时。

我创造了#61500允许脚本依赖于脚本模块。

建议的提交消息：

脚本模块：添加新的API以在HTML中嵌入服务器数据。添加一个新的过滤器“script_module_data_{$module_id}”来关联数据使用脚本模块。例如：添加筛选器(“script_module_data_MyScriptModuleID”，函数（数组$data）：数组{$data['script-needs-this-data']='ok'；返回$data；});如果脚本模块包含在页面中、排队或作为依赖关系，关联的数据将被JSON编码并嵌入＜script type＝“application/json”＞标签中的HTML，带有表单的ID“wp-script-module-data-{$module_id}”允许脚本模块访问客户端上的数据。见原始提案：https://make.wordpress.org/core/2024/05/06/proposal-server-to-client-data-sharing-for-script-modules/#60647的一部分开发于https://github.com/WordPress/WordPress-develop/pull/6682道普斯·琼斯瑞尔、卡布拉沃伯纳尔、韦斯顿鲁特、吉奥罗、伯恩哈特·雷特、你知道的里亚德、塞吉奥多梅斯、查普拉。

致力于核心业务https://core.trac.wordpress.org/changeset/58579.

修改脚本模块的注册方式。

这是​https://github.com/WordPress/gutenberg/pull/65460这需要移植到Core。即，块库更改需要使用更新的脚本模块ID进行注册，以便块继续正常工作。在更新block-library包之前，此更改是安全的。

• 脚本模块注册在一个中心位置处理。
• 组合资产文件用于脚本模块注册。
• 按需排队的块库脚本模块资产在集中位置注册。资产按需排队。​这解决了在Core中运送Gutenberg特定代码的问题。
• 块库脚本模块资源模块ID被重命名，以指示它们是视图文件，并与​https://github.com/WordPress/gutenberg/pull/65064，例如。@wordpress/block-library/query现在是@wordpress/block-library/query/view（表示它是一个视图文件）。

古腾堡发生了变化，这也预示着这一变化。必须命名核心功能wp_default_script_模块或更新Gutenberg：

​https://github.com/WordPress/gutenberg/blob/2632234b2bdd6ef8b89e7521d370cfa0041764/lib/client assets.php#L652

这包括来自​https://github.com/WordPress/gutenberg/pull/65460.

##为什么？

• 在多个位置注册脚本模块非常混乱，并且很难维护。
• 脚本模块依赖项数组和版本是手动维护的，这很容易出错。
• 一些块库代码包含Gutenberg特定的函数和常量，这是不可取的。

##测试说明

试用此PR.互动脚本模块(@wordpress/互动和@wordpress/交互式路由器)应该从script-modules目录提供。
我添加并恢复了一个使用预期块库构建的提交​Gutenberg即将推出的变化。该特定提交可用于测试块库以备将来使用。

尝试启用和禁用脚本_取消.应控制小型或非小型资产的使用。@wordpress/互动应该使用它的调试脚本的版本脚本_取消启用。

Trac票：https://core.trac.wordpress.org/ticket/60647

[Jonsrell公司]

​https://github.com/WordPress/gutenberg/pull/65460和​https://github.com/WordPress/WordPress-develop/pull/7360正在努力添加@文字新闻/a11y脚本模块。

@gziolo我认为CI现在会通过，这应该可以进行审查了。

有一些测试失败，它看起来像是新弃用的函数中的一个简单修复：

WP_Interactivity_API:：register_script_modules的意外弃用通知。

有一些测试失败，它看起来像是新弃用的函数中的一个简单修复：

WP_Interactivity_API:：register_script_modules的意外弃用通知。

有一些测试失败，它看起来像是新弃用的函数中的一个简单修复：

WP_Interactivity_API:：register_script_modules的意外弃用通知。

有一些测试失败，它看起来像是新弃用的函数中的一个简单修复：

WP_Interactivity_API:：register_script_modules的意外弃用通知。

测试不应再运行这两个已弃用的方法。

@michalczaplinski@darerodz如果能在这个PR上测试出Interactivity API以及块库中的交互式块，那就太棒了。

这个分支上有一个还原的提交，可以重新应用到新的块库版本的测试中。提交消息是“使用古腾堡的块库资产进行测试”（目前​404336b个).

我已经开始准备接下来的步骤​https://github.com/WordPress/WordPress-development/pull/7405添加a11y脚本模块。

构建于​https://github.com/WordPress/WordPress-develop/pull/7360（此处合并）。

Trac票：https://core.trac.wordpress.org/ticket/60647

干得好，谢谢。快速提醒，提交此后台端口的截止日期是6.7 Beta 1，计划于10月1日。

[吉奥罗牌手表]

在59083:

构建：准备更多脚本模块

这是​https://github.com/WordPress/gutenberg/pull/65460需要在WordPress Core中同步。即，块库更改需要使用更新的脚本模块ID进行注册，以便块继续正常工作。

关键的改进是在一个中心位置处理脚本模块注册，并使用组合资产文件来提高性能，避免对每个文件执行多个磁盘操作。

道具Jonsurerl、gziolo、野生植物、噪音山雀。
请参见#60647,#59462.

承诺使用https://core.trac.wordpress.org/changeset/59083.

[吉奥罗牌手表]

由于这些原因，我认为不值得尝试在模块中加载脚本。我认为我们最好尝试使用构建脚本为一些选定的包创建脚本和模块。我甚至可以看到某些东西的脚本和模块版本之间的一些差异。例如，配置翻译的方式不应该与wp-i18n相同，我们必须加载上下文翻译（根据需要延迟加载它们，而不是在服务器端打印它们…）

我们根据@youknowriad概述的计划对这张票进行迭代。我刚刚完成了@jonsurerl所做的所有准备工作，以调整脚本模块与WordPress核心的集成方式，以反映与许多WP发行版迭代的脚本相同的处理方式。下一步是公开更多具有以下优先级的包：

• @文字新闻/a11yWP 6.7即将推出-​https://github.com/WordPress/WordPress-develop/pull/7405，它是最好的验证工具，因为它可以用于重构@wordpress/交互式路由器当启用点击展开功能时，我们可以将其用于Gallery块。
• @wordpress/api-回迁-请求最多的包。
• @wordpress/挂钩-这是WP的关键功能。
• @文字印刷/i18n-#60234这取决于它。

我们还可以考虑其他一些不错的普通JS包：

• @wordpress/日期-它需要在服务器上进行配置，只有当它不再依赖于动量
• @wordpress/is-shallow相等
• @wordpress/按键-不确定为常量加载模块是否值得
• @wordpress/优先级队列
• @文字新闻/url-仅WP特定的utils，注意事项与@wordpress/按键
• @wordpress/警告-那一个可以和@wordpress/互动要修复的包​https://github.com/WordPress/gutenberg/issues/61765

可能还有更多，它们都不依赖于React，所以这似乎是一个软件包是否足够通用的首要指标。然而，这在现阶段还不够清楚。很高兴稍后再讨论，但目前我们希望解决列为首要任务的最需要的问题。
字数-可能太具体

@gziolo@darerodz@michalczaplinski这已经准备好接受审查了。

无法用测试​https://github.com/WordPress/WordPress-development/pull/7304此时，除非交互式路由器在nodemodules中修改包​修改此检查.

[Jonsrell公司]

​https://github.com/WordPress/WordPress-develop/pull/7405已准备好进行审阅以添加公开@文字新闻/a11y核心脚本模块。

通过提交https://core.trac.wordpress.org/changeset/59089

[恰普拉]

在59089:

脚本加载器：添加@文字新闻/a11y作为脚本模块。

脚本模块与wp-a11y型WP脚本。

主要变化：

• 添加@文字新闻/a11y脚本和模块双包列表。
• 更新脚本-模块-packages.min.php包括a11y模块。
• 修改WP_脚本_模块类来跟踪和处理11y模块的可用性。
• 添加方法以打印11y所需的HTML标记演讲（）功能。

请参见#60647.
道具Jonsurerl、gziolo、czapla。

更改的帐户@wordpress/交互式路由器模块位于：

• ​https://github.com/WordPress/gutenberg/pull/65123
• ​https://github.com/WordPress/gutenberg/pull/65539

Trac票：https://core.trac.wordpress.org/ticket/60647

这已被取代​https://github.com/WordPress/WordPress-develop/pull/7360,​https://github.com/WordPress/WordPress-develop/pull/7405以及其他努力。