フィーチャーフラグ
Topics
「フィーチャーフラグ」とは、Gutenberg プロジェクト内の特定のコードを WordPress コアとしてリリースされないようにし、特定の実験的な機能をプラグイン内だけで実行できるようにする変数です。
process.env.IS_GUTENBERG_PLUGIN の導入
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 コア用のビルドに含まれません。
なぜ IS_GUTENBERG_PLUGIN 関連の評価結果を変数に割り当てるべきではないのですか ? たとえば const isMyFeatureActive = process.env.IS_GUTENBERG_PLUGIN === true ではいけないのですか ?
webpack のミニファイが呼ばれないコードを削除できるよう、コードに複雑性を持ち込まないようにするためです。詳細については上の「呼ばれないコードの削除」セクションを参照してください。
複雑にすると、webpack のミニファイアが呼ばれないコードを識別できず、また削除できなくなる可能性があるためです。そのため、このドキュメントにある例を使用して、フィーチャーフラグが意図したとおりに機能することを確認してください。詳細については上の「呼ばれないコードの削除」セクションを参照してください。
最終更新日: