功能标记

“功能标志”是允许您阻止Gutenberg项目中的特定代码被发送到WordPress核心的变量,并且只在插件中运行某些实验性功能。

介绍globalThis。IS_GUTENBERG_PLUGIN公司

这个global这个。IS_GUTENBERG_PLUGIN公司是一个环境变量,其值“标记”代码是否在Gutenberg插件中运行。

当为插件构建代码库时,此变量将被设置为真的。为WordPress核心构建时,它将设置为未定义.

基本用法

导出功能

应使用以下三元语法导出纯插件函数或常量:

函数myPluginOnlyFeature(){//实施}export const pluginOnlyFeature=globalThis。IS_GUTENBERG_PLUGIN公司? myPluginOnlyFeature(仅限插件功能):未定义;

在上述示例中仅插件功能出口将是未定义在WordPress核心等非插件环境中。

导入功能

如果您试图导入并调用仅插件功能,请确保将函数调用包装在如果避免错误的语句:

从“@wordpress/foo”导入{pluginOnlyFeature};if(全局This.IS_GUTENBERG_PLUGIN){仅插件功能();}

它是如何工作的

在webpack构建期间global这个。IS_GUTENBERG_PLUGIN公司将使用webpack替换定义插件.

例如,在以下代码中–

if(全局This.IS_GUTENBERG_PLUGIN){仅插件功能();}

–变量global这个。IS_GUTENBERG_PLUGIN公司将替换为布尔值真的在纯插件构建期间:

if(真){//Wepack已取代`globalThis。IS_GUTENBERG_PLUGIN`带`true`仅插件功能();}

这确保了如果语句将始终执行。

在WordPress核心中global这个。IS_GUTENBERG_PLUGIN公司变量替换为未定义。生成的代码如下所示:

if(未定义){//Webpack已取代`globalThis。IS_GUTENBERG_PLUGIN`带`未定义`仅插件功能();}

未定义计算为因此,只支持插件的功能将不会被执行。

死代码消除

对于生产版本,webpack“缩小”代码,尽可能删除不必要的JavaScript。

其中一个步骤涉及所谓的“死代码消除”。例如,当遇到以下代码时,webpack确定如果语句是不必要的:

if(真){仅插件功能();}

条件的计算结果始终为真的,所以webpack删除了它,留下了正文中的代码:

仅插件功能();//已删除“if”条件块。只剩下尸体了。

类似地,在为WordPress核心构建时,以下条件如果语句始终解析为false:

if(未定义){仅插件功能();}

在这种情况下,缩小过程将删除整个如果语句包含正文,确保仅插件代码不包含在WordPress核心构建中。

常见问题

为什么我不应该将涉及IS_GUTENBERG_PLUGIN的表达式的结果赋给变量,例如const isMyFeatureActive=!对象.is(未定义,globalThis.is_GUTENBERG_PLUGIN)?

引入复杂性可能会阻止webpack的缩小器识别并因此消除死代码。因此,建议使用本文档中的示例,以确保功能标记功能符合预期。有关更多详细信息,请参阅失效代码消除第节。