引入了一个新的“脚本模块”接口以支持本机JavaScript模块在WordPress中。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/interactive”导入*作为交互性;
已注册的模块具有一组模块依赖项。依赖项可以是简单字符串(依赖项模块ID)或以下形式的关联数组:
$dependencies=数组(
“id”=>“@wordpress/互动”,
“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/条目
模块:
// "@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包含/js/dist/interactivey.min.js?ver=xyz
导入映射包括所有入队模块的所有依赖项,以及这些依赖项的所有依赖项等。导入映射将不包括所有注册模块的依赖项,仅包括页面上可能需要作为依赖项的依赖项,并且它不会包括排队模块,除非它们位于其他排队模块的依赖关系图中。
A类<link rel=“modulepreload”>
将为所有静态依赖项添加。静态依赖项是所有未定义为数组('id'=>'…','import'=>'dynamic')
。这是浏览器的优化提示,在此处阅读更多信息.
相关链接
道具
#6-5,#开发说明,#开发注释-6-5