构建软件时，快速发布新功能而不破坏任何内容可能很棘手。功能标志使这变得更容易。在阅读了 Vercel 的功能标志 SDK 后，我认为进一步研究功能标志并解释它们是什么、它们如何工作以及如何自己构建一个功能标志会很有帮助。

什么是功能标志？

功能标志（也称为功能切换）允许开发人员打开或关闭功能，而无需更改代码或重新部署应用程序。这意味着您可以：

• 逐步发布功能：只让部分用户看到新功能，慢慢向所有人推出。
• 在生产环境中测试新功能：您可以为自己或一小群测试人员启用该功能，而不需要将其提供给所有用户。
• 快速回滚功能：如果新功能导致问题，您可以禁用它而无需重新部署。

使用功能标志，您可以控制用户何时可以访问功能，与部署代码的时间分开。

为什么要使用功能标志？

1. 持续交付

   功能标志帮助团队更频繁地发布代码。您可以将未完成的工作合并到主代码库中，将其隐藏在标志后面，然后在不影响用户的情况下进行部署。

2. A/B 测试

   您可以使用不同的用户组测试某个功能的两个版本，看看哪个版本性能更好。这有助于基于真实数据改善用户体验。

3. 受控部署

   您可以向一小群用户发布一项功能，监控其性能，然后将其发布给其他所有人。

4. 快速回滚

   如果出现问题，关闭功能标志比恢复代码更改要快得多，有助于保持应用程序稳定。

将 Next.js 中的功能标志与 Vercel 的 Flags SDK 结合使用

flags.ts（服务器端）

import { unstable_flag as flag } from "@vercel/flags/next";

export const showBanner = flag({
  key: "banner",
  decide: () => false,
});

决定函数确定标志的值，该值可以从各种来源提供，例如：

• 环境变量
• 其他功能标志提供商
• Vercel 的 Edge Config（数据配置存储）
• 数据库等

app/page.tsx

import { showBanner } from "../flags";

export default async function Page() {
  const banner = await showBanner();
  return (
    

      {banner ?  : null}
      {/* other components */}
    
  );
}

由于标志是函数，我们可以轻松地更改实现，而无需修改调用方的任何内容。这种灵活性使您的应用程序能够适应新的要求，而无需更改标志逻辑的核心结构。

如何构建您自己的功能标记系统

让我们构建一个简单的功能标记系统，您可以随着时间的推移对其进行改进。

第 1 步：创建用于检索功能标志的自定义挂钩

此步骤涉及创建一个自定义挂钩，该挂钩将允许您动态检索功能标志。您可以轻松地在 React 应用程序的任何部分重用此钩子来检查某个功能是否启用或禁用。

import { useState, useEffect } from 'react';

export const useFeatureFlag = (key: string): boolean => {
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    const fetchFeatureFlag = async () => {
      try {
        const response = await fetch(`http://localhost:3001/api/feature-flags/${key}`);
        if (response.ok) {
          const data = await response.json();
          setIsEnabled(data.is_enabled);
        }
      } catch (error) {
        console.error('Failed to fetch feature flag:', error);
      }
    };

    fetchFeatureFlag();
  }, [key]);

  return isEnabled;
};

第2步：反应组件

接下来，创建一个组件，该组件使用自定义挂钩根据该标志是启用还是禁用来呈现不同的功能。这将使您的应用程序能够在新旧功能之间无缝切换，而不会对用户体验造成任何干扰。

import React from 'react';
import { useFeatureFlag } from './useFeatureFlag';

const FeatureFlaggedComponent: React.FC = () => {
  const isNewFeatureEnabled = useFeatureFlag('new-feature');

  return (
    

      
Feature Flag Example
      {isNewFeatureEnabled ? (
        

          
New Feature
          
This is the new feature enabled by the feature flag.
        
      ) : (
        

          
Old Feature
          
This is the old feature displayed when the new feature is disabled.
        
      )}
    
  );
};

export default FeatureFlaggedComponent;

市场上的其他功能标记解决方案

构建您自己的功能标记系统对于小型项目很有用，但如果您与更大的团队合作或需要更高级的控制，有几种工具提供功能标记作为服务：

1. Vercel 功能标志

   Vercel 提供与其平台集成的功能标志，允许实时控制哪些用户看到哪些功能。

2. 启动Darkly

   LaunchDarkly 是一种用于大规模管理功能标志的流行工具。它支持复杂的部署，根据位置或行为等属性定位用户。

3. 优化

   优化专注于实验和 A/B 测试，使用功能标志来测试不同的功能并改善用户体验。

4. Split.io

   Split.io 允许团队在不同功能版本之间划分流量并实时跟踪性能指标。

5. Hypertune

Hypertune 是功能标记领域的新玩家，专注于高性能实验和功能切换。它使团队能够以最小的延迟运行复杂的实验，确保实时的性能洞察。 Hypertune 的独特方法将功能标记与机器学习模型相集成，从而可以在功能推出和用户定位方面做出更智能的决策。

结论

功能标志是安全发布功能、在生产中测试以及快速更改而无需重新部署代码的绝佳方式。您可以使用 JavaScript 构建一个简单的功能标记系统，或者针对大型项目使用 Vercel、LaunchDarkly 或 Optimizely 等更高级的工具。

使用功能标志将使您的开发过程更加灵活和高效，使您能够更快、更自信地交付新功能。

感谢您的阅读，欢迎留言分享您的意见！