6.5中的脚本模块

引入了一个新的“脚本模块”接口以支持本机JavaScript模块在WordPress中。JavaScript脚本JavaScript脚本 JavaScript或JS是一种面向对象的计算机编程语言,常用于在web浏览器中创建交互效果。WordPress广泛使用JS以获得更好的用户体验。当PHP在服务器上执行时,JS在用户浏览器中执行。https://www.javascript.com/.模块使用进口出口和通常被称为ECMAScript模块或“ESM”。

这篇文章将分别提到脚本和脚本模块概念的“脚本”和“模块”。

JavaScript模块是一个核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。web技术具有许多好处,如导入和导出以进行适当的范围界定,强制严格模式、和延期装货WordPress支持模块并鼓励将其用作JavaScript开发的未来,这一点很重要。

脚本模块美国石油学会美国石油学会 API或应用程序编程接口是一种软件中介,允许程序相互交互并以有限的、明确定义的方式共享数据。

该接口是根据现有脚本接口建模的,应该感觉很熟悉。模块由一个类似于脚本句柄的唯一标识符(ID)标识。

注册的模块ID应与JavaScript中导入的模块名称相同。例如@wordpress/互动模块可以在另一个模块中用作:

从“@wordpress/interactivity”导入*作为交互;

已注册的模块具有一组模块依赖项。依赖项可以是简单字符串(依赖项模块ID)或以下形式的关联数组:

$dependencies=数组(
“id”=>“@wordpress/interactivity”,
'import'=>'dynamic'//可选。
);

数组形式可以选择包含进口带有值的键“静态”(默认)或“动态”。可能不需要或只应在某些情况下加载的依赖项应使用“导入”=>“动态”.

请注意,这些依赖项是模块依赖项,而不是脚本依赖项。脚本句柄不应作为模块依赖项列出。

以下函数是界面中与使用模块的开发人员最相关的部分:

  • wp_register_script_module(字符串$id,字符串$src,数组$deps=array(),$version=false):注册模块。
  • wp_enqueue_script_module(字符串$id,字符串$src='',数组$deps=array(),$version=false):标记要排队的模块。可选的美元src参数可以用于排队和注册模块。
  • wp_deregister_script_module(字符串$id):取消注册模块。
  • wp_dequeue_script_module(字符串$id):取消标记模块,使其不排入队列。

重要注意事项

强烈建议当前在其扩展中使用JavaScript模块的开发人员迁移到脚本模块API。这将规范行为,带来许多好处,并防止出现以下一些潜在问题:

  • 当前使用导入映射的任何代码都可能会遇到兼容性问题,因为当前不支持多个导入映射.
  • 如果模块出现在导入映射之前,将触发一个错误,导致忽略导入映射。这将破坏脚本模块API所依赖的一些关键功能。

迁移到新API以防止这些问题非常重要。如果迁移不可行,那么将模块脚本移动到页脚可能会缓解一些潜在问题。

可用模块

6.5中提供了两个核心模块。

@wordpress/互动是使用交互API.

@wordpress/交互式路由器使用核心/路由器命名空间,为客户端导航公开相关状态和操作。

目前没有其他核心模块可用。作为6.5之前的脚本提供的JavaScript包不能作为模块提供。例如@wordpress/api获取包对应于wp-api-蚀刻脚本,在WordPress中无法作为模块使用。

使用脚本模块

使用模块最相关的功能是wp_寄存器_脚本_模块注册和wp_排队_脚本_模块将模块排队。例如:

//注册模块后,它现在可以显示为依赖项或排队。
wp_寄存器_脚本_模块(
“@my-plugin/shared”,
插件dir_url(__FILE_)。'共享.js
);

//注册模块并将其排队。
wp_排队_脚本_模块(
“@my-plugin/entry”,
插件dir_url(__FILE_)。'entry.js’,
数组(“@my-plugin/shared”)
);

//将以前注册的模块排队。
wp_enqueue_script_module('@my-plugin/a-registered-module');

在本例中@我的插件/共享模块将可用于@my-plugin/条目模块:

// "@my-plugin/条目“模块位于…/entry.js
从“@my-plugin/shared”导入*作为共享;
shared.doSomethingInterest();

阻碍

WordPress 6.5引入了一个新的查看脚本模块块元数据字段它将处理模块注册和自动排队,类似于查看脚本.关于的完整开发说明视图脚本模块可以在此处阅读.

模块注册

熟悉现代JavaScript开发的开发人员会认出模块系统,可能会想,“我必须在WordPress中注册所有模块才能使用吗?”简单的回答是否定的,但推荐的方法是注册所有模块。

JavaScript模块可以通过URL导入从'导入{实用程序}/实用程序.js’在现代应用中。因为脚本模块API构建在本地JavaScript模块之上, 模块可以在WordPress中导入相对路径。然而,推荐的方法是注册模块并使用注册的ID导入模块。这有几个好处:

  • 已注册的模块在全球范围内可用。无需担心模块统一资源定位地址统一资源定位地址 互联网上网站或网页的特定网址,例如网站的URL www.wordpress.org.
  • 已注册的模块具有版本。脚本模块API透明地处理将模块ID与正确的URL和版本相关联的问题。
  • 降低了模块重复的风险。如果模块是通过不同的URL导入的,浏览器可能会获取并执行表面上相同模块的多个副本。
  • 静态导入的依赖项将在模块排队时预加载。这允许浏览器并行获取它们。

对未注册模块的相对导入对于原型制作和探索可能很有用,但生产代码的最佳实践是使用脚本模块API注册模块。

限制

此时模块和脚本不兼容。模块不能依赖于脚本,脚本不能依赖于模块。这意味着模块不能依赖于以下脚本wp-i18n型,wp-api-蚀刻等。

有一个变通方法可以使用模块中的脚本。例如,通过向窗口范围添加变量来共享脚本功能wp-api-蚀刻可以通过访问window.wp.api获取。要在此时使用模块中的脚本,开发人员必须:

  • 确保脚本已排队:wp_enqueue_script('wp-api-fetch')
  • 通过全局范围访问脚本:const{apiFetch}=窗口.wp

这种变通方法有很多缺点,但它可能是一种有效的解决方案。有关脚本和模块互操作性的工作,请遵循Core-Trac问题#60647.

兼容性

如今,JavaScript模块在大多数浏览器中都有出色的支持。此外,脚本模块API还包括一个polyfill,用于缺乏或不完全支持的浏览器,以使受支持的浏览器数量更大。

技术细节

脚本模块API如何工作的完整解释超出了本说明的范围,但本节将提供简要概述。

脚本模块API将跟踪已注册和已排队的模块。对于每个排队的模块<script type=“模块”> 标签标签 Subversion中的目录。WordPress使用标签来存储版本(3.6、3.6.1等)的单个快照,这是版本控制系统中标签的常见约定。(不要与帖子标签混淆。)将添加以加载和执行模块。

A类<script type=“importmap”>标签将添加。导入映射告诉浏览器如何将模块ID映射到URL,以便在看到“@wordpress/interactivity”,它知道应该从URL获取模块/wp-includes/js/dist/interactivity.min.js?ver=xyz。导入映射包括所有排队模块的所有依赖项,以及这些依赖项的所有依赖性等。导入映射将不包括所有注册模块的依赖项,只包括页面上可能需要的依赖项,并且它不会包括排队模块,除非它们位于其他排队模块的依赖关系图中。

A类<link rel=“modulepreload”>将为所有静态依赖项添加。静态依赖项是所有未定义为数组('id'=>'…','import'=>'dynamic')。这是浏览器的优化提示,在此处阅读更多信息.

相关链接

道具

#6-5,#开发说明,#开发注释-6-5