如何使用 JavaScript 功能切换进行安全部署 [React.js 示例与 Dev.to App]

任何语言中的功能开关（又称功能切换开关）都能显著降低发布版本出现问题时的受影响范围。JavaScript 功能开关也不例外。我们已经分享了如何在 Node.js 中使用功能开关的指南。在本文中，你将学习如何在 React.js 应用程序中使用 JavaScript 功能切换开关，安全地将一个小功能部署给用户。

让我们开始吧！

先决条件

在深入研究代码和 JavaScript 功能切换之前，以下是一些需要满足的条件：

具备一些 Javascript 和 React.js 的知识至关重要
需要了解 Node.js 和 Yarn 的工作原理，还需要了解如何使用 Yarn 添加新包
将使用 Flagsmith 帐户创建功能标记。立即注册 - 免费。Flagsmith 是开源产品 -请访问 Github 查看。

我们现在就直接进入代码部分，做好准备。

示例：使用 React.js Dev.to 应用的 JavaScript 功能标记

我们将构建一个简单的 React.js 应用，用于列出来自 Dev.to 的最新文章。Dev.to 是一个软件开发者互助互爱的社区，这篇文章就是在这里阅读的😅。这是一个非常棒的社区，任何人都可以发布技术内容，无需任何编辑流程。它基于Forem，拥有便捷的 API，我们将使用文章 API 在一个轻量级的 React.js 应用中列出最新文章。

要使用 create react app 创建React.js 应用程序，我们将运行以下命令：

npx create-react-app devto-react

设置完成后将呈现如下输出：

接下来，我们将快速运行 React.js 样板应用程序，看看它是否正在运行：

cd devto-react

yarn start

它将启动开发服务器并打开默认浏览器，http://localhost:3000如下所示：

好啦！我们用 Create React App 为 JavaScript 功能切换教程创建的 React 应用框架已经运行了。接下来我们将修改代码以调用 Dev.to API。

并将src/App.js文件更改为如下所示：

import React, { useState, useEffect } from 'react';
import './App.css';
function App() {
  const [articles, setArticles] = useState([]);
  const [message, setMessage] = useState('loading…');
  useEffect(() => {
    async function fetchArticles () {
      try {
        const data = await (await fetch('https://dev.to/api/articles/latest')).json();
        setArticles(data)
        const message = data.length ? "" : 'No articles found';
        setMessage(message);
      } catch (err) {
        console.log('err: ${err.message}', err);
        setMessage('could not fetch articles');
      }
    }
    fetchArticles()
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <h2>Latest Dev.to articles</h2>
        {message}
        <div className="articles">
          <ul>
          {Array.isArray(articles) && articles.map(
            article => article.url && <li><a href={article.url} target="_blank" rel="noreferrer">{article.title}</a> – by {article.user.name}</li>
          )}
          </ul>
        </div>
      </header>
    </div>
  );
}

export default App;

我们使用React useState hook 定义两个变量：articles 和 message。然后使用effect hook在函数中调用 Dev.to API fetchArticles。获取到的文章会被放入articles变量中。如果出现任何错误，No articles found则会将错误信息放入 message 变量中。

下面，在返回部分，我们循环遍历所有获取的文章，并显示文章的标题及其链接以及发布文章的用户的姓名。

因此，我们将修改src/App.css为以下内容

.App-header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: calc(10px + 2vmin);
}

.App-header h2 {
  text-align: center;
}

.App-link {
  color: #61dafb;
}

简化了 CSS 以显示文章列表，删除了不必要的徽标和背景样式。文本颜色和文本对齐方式也已重置。

本教程的重点是帮助你学习如何使用 Flagsmith 进行 React 功能切换。当我们yarn start在进行上述更改后运行它时，应用程序此时如下所示：

在本指南的范围内，我们将添加文章的阅读时间（以分钟为单位）。由于这项小功能将通过 JavaScript 功能切换添加，因此只需在 Flagsmith 中切换一个标志即可轻松启用或禁用它；无需重新部署。这就是功能标志的强大之处和便捷之处，因为部署并非发布。

在下一节中，我们将在 Flagsmith 的 UI 中为示例设置功能标记。然后，我们将在 NPM 上获取 Flagsmith 的 JavaScript SDK 添加到我们的项目中。之后，我们将添加一些代码来实现一个简单的标记，用于显示或隐藏 Dev 文章的阅读时间。

设置 Flagsmith 以拥有功能标志

Flagsmith 是开源产品 -请查看 Github。

要创建 JavaScript 功能切换开关来显示或隐藏文章的阅读时间，我们首先需要在 Flagsmith 上创建一个项目。登录后，点击“创建项目”按钮即可创建项目：

我把这个项目命名为 Dev-React，然后，我们将进入如下的项目页面：

我们将向下滚动页面并创建一个名为的新功能标志，show_reading_time如下所示：

现在，我们已经创建了一个名为“Flagsmith”的新功能开关show_reading_time，并启用了它。它将在 Flagsmith 的开发和生产环境中创建。接下来，我们将安装flagsmithNPM 库，并在 React.js 应用中使用它，以完成 JavaScript 功能开关教程。

安装并使用 Flagsmith JavaScript 客户端

如果您喜欢我们所做的事情，请查看开源产品 Flagsmith -查看 Github。

我们已经在 Flagsmith 的 UI 上创建了功能开关，现在是时候在 Dev React 应用中使用它了。为了在我们的 JavaScript 功能开关教程中做到这一点，我们首先从 NPM 获取 Flagsmith JavaScript 客户端，并运行以下命令：

yarn add flagsmith

客户端安装完成后，flagsmith我们将更改中的代码src/App.js。首先，我们将在第 2 行添加以下行，以将 Flagsmith 库导入应用程序：

import flagsmith from 'flagsmith';

随后，我们在第 8 行添加以下内容来初始化showReadingTime变量，默认情况下该变量为 false：

const [showReadingTime, setShowReadingTime] = useState(false);

然后我们在下面调用useEffect的函数中添加下面的代码，如下所示：fetchArticles

flagsmith.init({
    environmentID:"VKE5KnX8xXZuztTDGbcvBU",
    cacheFlags: true,
    enableAnalytics: true,
    onChange: (oldFlags, params) => {
    setShowReadingTime(flagsmith.hasFeature('show_reading_time'));
    }
  });

您可以从功能标志页面的“初始化代码”部分获取环境 ID，如下所示：

因此，在您看到循环遍历文章的第 40 行处添加以下代码：

<ul>
          {Array.isArray(articles) && articles.map(
            article => article.url && <li><a href={article.url} target="_blank" rel="noreferrer">{article.title}</a> – by {article.user.name} {showReadingTime ? '(Around ${article.reading_time_minutes} minute${article.reading_time_minutes > 1 ? "s": ""} read)' : ""}</li>
          )}
</ul>

我们首先导入了 Flagsmith 的 JavaScript 客户端，然后设置了showReadingTimeon useEffect 函数，使其仅在页面加载时调用一次。之后，在渲染文章时，我们会检查是否应该显示阅读时间，如果显示则打印阅读时间，否则打印空字符串。接下来我们将看到实际的变化。

测试 JavaScript 功能切换更改

此时，如果我们再次启动该应用程序，它将显示如下内容：

太棒了！我们可以看到文章的阅读时长了。现在，如果我们想关闭阅读时长显示，也很简单。我们只需进入 Flagsmith 界面，然后像下面这样关闭该功能即可：

在我们点击“确认更改”并且标志关闭后，如果我们返回并刷新用于示例的 Dev React 应用程序页面，我们将不再看到阅读时间，如下所示：

是不是很简单？您可以部署应用程序，并将环境 ID 更改为 production 以适应您的生产环境。下一步，我们将把 React 应用程序部署到 Surge。

将 React App 部署到 Surge.sh（React 功能标志）

我们已经在本地运行了该应用程序，因此为了将其部署到更接近生产环境，我们将使用 Surge.sh。这是一个非常容易部署前端应用程序的平台。要将我们的 React 应用程序部署到 Surge，首先需要将密钥从开发环境替换为生产环境。为此，我们将进入“生产”环境，然后点击功能部分下的“初始化您的项目”，如下所示：

我们已经对开发环境做了类似的事情，因为我们希望部署到类似生产的环境，所以我们将环境 ID 替换为生产环境。我们将复制环境 ID 并在第 23 行进行替换，src/App.js更改后的内容如下所示：

flagsmith.init({
    environmentID:"BLPF23hJZ4ekaYV48epC55",
    cacheFlags: true,
    enableAnalytics: true,
    onChange: (oldFlags, params) => {
     setShowReadingTime(flagsmith.hasFeature('show_reading_time'));
    }
  });

要将我们的 Dev.to React 应用程序部署到 surge，我们将运行以下命令：

yarn build

它将给出以下输出：

它还将创建一个build文件夹，其中包含构建过程的输出，其中包含 index.html 文件和其他静态资产。

要安装 Surge 命令行，我们将运行以下命令：

npm i -g surge

因此，我们将进入构建文件夹并使用以下命令部署构建的应用程序：

cd build
surge

然后输入你的邮箱和密码。它会将你当前的工作目录作为项目。之后，如果你愿意，可以更改子域名（我这里使用的是子域名），或者你devto-react.surge.sh也可以使用它提供的随机子域名。按下回车键，几秒钟后你的应用就会通过 CDN 部署到 Surge，如下所示：

太简洁了！下图是该应用在 Surge.sh 上的效果，其中 JavaScript 功能开关的阅读时间设置为“开启”，取自“生产”环境：

您也可以在https://devto-react.surge.sh上尝试一下。您将收到一封用于验证电子邮件地址的电子邮件，如果您对 Surge 感兴趣，请查看其帮助部分。在下一部分中，我们将介绍后续步骤。

后续步骤

在 JavaScript 中实现标志非常简单，而且好处多多。您可以在任何前端应用程序中使用相同的 Flagsmith JavaScript 客户端，从原生 JavaScript 到 Jquery，甚至是 Angular 或 Vue.js 应用程序。您也可以使用 CDN 中的 SDK，代码如下：

<script src="https://cdn.jsdelivr.net/npm/flagsmith/index.js"></script>

这里的核心理念是安全地部署功能，如果出现问题，我们应该能够在几秒钟内将其关闭，而不是几分钟或几小时。使用像 Flagsmith 这样的开源平台或免费计划上的功能开关可以轻松实现这一点。只需几次点击即可启用和关闭该功能，无需部署流程。这为软件工程团队带来了前所未有的强大功能和灵活性。功能发布的安全性是整个流程的另一个理想副产品。顺便说一句，你一定要查看功能开关的 5 个最佳实践。

结论

我们刚刚了解了如何在一个简单的 React.js 应用上实现 JavaScript 功能切换，该应用调用 API 来显示最新的开发文章。这个想法可以在任何前端 JavaScript 应用程序中轻松实现。您可以安全可靠地发布功能，并且无需部署任何新代码即可快速启用或禁用已发布的功能。

PS 原文发表于此处

鏂囩珷鏉ユ簮锛�https://dev.to/ilya_azovtsev/how-to-use-javascript-feature-toggles-to-deploy-safely-reactjs-example-with-devto-app-408g