mcpField
F
feature-flags

feature-flags

github.com/react开发251.8k1.2k 次安装今天更新
代码仓库

关于 feature-flags

用于 React 仓库开发的功能标志技能，说明如何在不同构建分支维护标志，并据标志状态编写和运行测试。

主要功能

  1. 01维护默认及分支标志文件
  2. 02使用 @gate 控制测试运行
  3. 03用 gate() 验证不同标志行为
  4. 04检查渠道标志状态与差异
  5. 05测试 __VARIANT__ 的两种状态

适用场景

  1. 01为 React 新功能添加标志
  2. 02区分功能关闭与行为变化的测试
  3. 03排查特定渠道的测试失败

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/react/react --skill feature-flags

安装后在 Claude Code 中输入/feature-flags确认已加载。

详细介绍

React 功能标志

标志文件

文件用途
packages/shared/ReactFeatureFlags.js默认标志（canary），__EXPERIMENTAL__ 覆盖项
packages/shared/forks/ReactFeatureFlags.www.jswww 通道，__VARIANT__ 覆盖项
packages/shared/forks/ReactFeatureFlags.native-fb.jsReact Native，__VARIANT__ 覆盖项
packages/shared/forks/ReactFeatureFlags.test-renderer.js测试渲染器

测试门控

@gate pragma（测试级）

当功能在未启用标志时完全不可用，请使用：

// @gate enableViewTransition
it('supports view transitions', () => {
  // This test only runs when enableViewTransition is true
  // and is SKIPPED (not failed) when false
});
内联 gate()（断言级）

当功能存在，但行为会根据标志而变化时，请使用：

it('renders component', async () => {
  await act(() => root.render(<App />));

  if (gate(flags => flags.enableNewBehavior)) {
    expect(container.textContent).toBe('new output');
  } else {
    expect(container.textContent).toBe('legacy output');
  }
});

添加新标志

  1. 在 ReactFeatureFlags.js 中添加，并设置默认值
  2. 在每个 fork 文件（*.www.js、*.native-fb.js 等）中添加
  3. 如果它在 www/RN 中应有所不同，请在 fork 文件中将其设为 __VARIANT__
  4. 使用 @gate flagName 或内联 gate() 对测试进行门控

检查标志状态

使用 /flags 查看各通道的状态。完整命令选项请参阅 flags 技能。

__VARIANT__ 标志（GKs）

设为 __VARIANT__ 的标志会模拟 gatekeeper——分别测试两次（true 和 false）：

/test www <pattern>              # __VARIANT__ = true
/test www variant false <pattern> # __VARIANT__ = false

调试特定通道的故障

  1. 运行 /flags --diff <channel1> <channel2> 比较值
  2. 检查 @gate 条件——测试可能仅对特定通道启用
  3. 运行 /test <channel> <pattern> 以隔离故障
  4. 如果是新添加的标志，请确认它存在于所有 fork 文件中

常见错误

  • 忘记测试两种变体——对于 __VARIANT__ 标志，始终测试 www 和 www 变体为 false 两种情况
  • 用 @gate 处理行为差异——如果两种路径都应运行，请使用内联 gate()
  • 遗漏 fork 文件——必须将新标志添加到所有 fork 文件中，而不仅是主文件
  • 门控语法错误——正确写法是 gate(flags => flags.name)，而不是 gate('name')

评论

支持 Markdown