Условное включение

{
  gating: {
    source: 'my-feature-flags',
    importSpecifierName: 'shouldUseCompiler'
  }
}

• Справочник
  • gating
• Использование
  • Базовая настройка флага функции
• Устранение неполадок
  • Флаг функции не работает
  • Ошибки импорта

Справочник

gating

Настраивает условное включение флагов функций во время выполнения для скомпилированных функций.

Тип

{
  source: string;
  importSpecifierName: string;
} | null

Значение по умолчанию

null

Свойства

• source: Путь к модулю, из которого импортируется флаг функции
• importSpecifierName: Имя экспортируемой функции для импорта

Ограничения

• Функция условного включения должна возвращать логическое значение
• И скомпилированная, и исходная версии увеличивают размер пакета
• Импорт добавляется в каждый файл со скомпилированными функциями

Использование

Базовая настройка флага функции

1. Создайте модуль флага функции:

// src/utils/feature-flags.js
export function shouldUseCompiler() {
  // your logic here
  return getFeatureFlag('react-compiler-enabled');
}

2. Настройте компилятор:

{
  gating: {
    source: './src/utils/feature-flags',
    importSpecifierName: 'shouldUseCompiler'
  }
}

3. Компилятор генерирует код с условным включением:

// Input
function Button(props) {
  return <button>{props.label}</button>;
}

// Output (simplified)
import { shouldUseCompiler } from './src/utils/feature-flags';

const Button = shouldUseCompiler()
  ? function Button_optimized(props) { /* compiled version */ }
  : function Button_original(props) { /* original version */ };

Обратите внимание, что функция условного включения вычисляется один раз при загрузке модуля, поэтому после разбора и выполнения JS-пакета выбранный компонент остается неизменным до конца сеанса браузера.

Устранение неполадок

Флаг функции не работает

Убедитесь, что модуль флага экспортирует правильную функцию:

// ❌ Wrong: Default export
export default function shouldUseCompiler() {
  return true;
}

// ✅ Correct: Named export matching importSpecifierName
export function shouldUseCompiler() {
  return true;
}

Ошибки импорта

Убедитесь, что путь к исходному файлу указан правильно:

// ❌ Wrong: Relative to babel.config.js
{
  source: './src/flags',
  importSpecifierName: 'flag'
}

// ✅ Correct: Module resolution path
{
  source: '@myapp/feature-flags',
  importSpecifierName: 'flag'
}

// ✅ Also correct: Absolute path from project root
{
  source: './src/utils/flags',
  importSpecifierName: 'flag'
}