フィーチャーフラグ

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

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

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

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

functionmyPluginOnlyFeature() {
	// implementation
}

exportconst pluginOnlyFeature =
	process.env.IS_GUTENBERG_PLUGIN ? myPluginOnlyFeature : undefined;

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

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

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

if ( process.env.IS_GUTENBERG_PLUGIN ) {
	pluginOnlyFeature();
}

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

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

if ( process.env.IS_GUTENBERG_PLUGIN ) {
	pluginOnlyFeature();
}

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

if ( true ) { // Wepack has replaced `process.env.IS_GUTENBERG_PLUGIN` with `true`pluginOnlyFeature();
}

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

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

if ( undefined ) { // Wepack has replaced `process.env.IS_GUTENBERG_PLUGIN` with `undefined`pluginOnlyFeature();
}

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

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

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

if ( true ) {
	pluginOnlyFeature();
}

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

pluginOnlyFeature(); // The `if` condition block has been removed. Only the body remains.

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

if ( undefined ) {
	pluginOnlyFeature();
}

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

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

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

原文

最終更新日: 2022年7月18日