フィーチャーフラグ

「フィーチャーフラグ」とは、Gutenberg プロジェクト内の特定のコードを WordPress コアとしてリリースされないようにし、特定の実験的な機能をプラグイン内だけで実行できるようにする変数です。

globalThis.IS_GUTENBERG_PLUGIN の導入

globalThis.IS_GUTENBERG_PLUGIN は、環境変数です。その値は、コードが Gutenberg プラグイン内で実行されているかどうかを示します。

プラグイン用にコードベースがビルドされると、この変数は true に設定されます。WordPress コア用にビルドする場合は、false または undefined に設定されます。

基本的な使用方法

エクスポート機能

プラグイン専用の関数や定数は、次の三項構文を使用してエクスポートしてください。

function myPluginOnlyFeature() {
	// ここに実装
}

export const pluginOnlyFeature = globalThis.IS_GUTENBERG_PLUGIN
	? myPluginOnlyFeature
	: undefined;

上の例の場合、WordPress コアなどの非プラグイン環境では、pluginOnlyFeature エクスポートは undefined になります。

インポート機能

プラグインのみの機能をインポートし、呼び出す場合はエラーを避けるため、関数呼び出しを if 文で囲んでください。

import { pluginOnlyFeature } from '@wordpress/foo';

if ( globalThis.IS_GUTENBERG_PLUGIN ) {
	pluginOnlyFeature();
}

動作原理

webpack のビルド時、globalThis.IS_GUTENBERG_PLUGIN は webpack の define プラグイン を使用して置き換えられます。

たとえば、次のコードでは、

if ( globalThis.IS_GUTENBERG_PLUGIN ) {
	pluginOnlyFeature();
}

– 変数 globalThis.IS_GUTENBERG_PLUGIN は、プラグインのビルドでのみ、ブール値 true で置き換えられます。

if ( true ) { // wepack が globalThis.IS_GUTENBERG_PLUGIN を true に置換した
	pluginOnlyFeature();
}

これにより、if 文の中にあるコードが、常に実行されます。

WordPress コアでは、globalThis.IS_GUTENBERG_PLUGIN 変数は undefined で置換されるため、ビルドされたコードは以下のようになります。

if ( undefined ) { // wepack が globalThis.IS_GUTENBERG_PLUGIN を undefined に置換した
	pluginOnlyFeature();
}

undefined は false と評価されるため、プラグインのみの機能は実行されません。

呼ばれないコードの削除

製品のビルドでは、webpack はコードをミニファイ (縮小化)し、可能な限り不要な JavaScript のコードを削除しようとします。

そのステップのひとつに、「呼ばれないコードの削除」があります。例えば、次のようなコードがあった場合、webpack は周囲の if 文は不要と判断します。

if ( true ) {
	pluginOnlyFeature();
}

条件は常に true と評価されるため、webpack は if 文を削除し、次のコードだけが残ります。

pluginOnlyFeature(); // if 条件ブロックが削除され、本体だけが残った

同様に WordPress コアのビルドの場合、次の if 文の条件は常に false と解決されます。

if ( undefined ) {
	pluginOnlyFeature();
}

この例で、ミニファイプロセスは内容を含む if 文全体を削除します。これでプラグインのみのコードは、WordPress コア用のビルドに含まれません。

よくある質問

なぜ IS_GUTENBERG_PLUGIN 関連の評価結果を変数に割り当てるべきではないのですか ? たとえば const isMyFeatureActive = ! Object.is( undefined, globalThis.IS_GUTENBERG_PLUGIN ) ではいけないのですか ?

webpack のミニファイが呼ばれないコードを削除できるよう、コードに複雑性を持ち込まないようにするためです。詳細については上の「呼ばれないコードの削除」セクションを参照してください。

複雑にすると、webpack のミニファイアが呼ばれないコードを識別できず、また削除できなくなる可能性があるためです。そのため、このドキュメントにある例を使用して、フィーチャーフラグが意図したとおりに機能することを確認してください。詳細については上の「呼ばれないコードの削除」セクションを参照してください。

原文