如何使用 React 存储和读取配置文件

2020-09-14 08:00:00 · 飞浪

在本指南中，您将学习如何在项目根目录中存储配置文件并在 React 中从中读取值。

介绍

开发人员更喜欢使用 React，因为它为他们构建应用程序提供了灵活性。在 React 中，所有 UI 组件都可以分离，因此是整个应用程序的构建块。在某些情况下，开发人员可能希望管理跨不同组件的静态全局变量。理想情况下，此变量应为常量，可以存储应用程序 URL、服务器 URL、主题颜色等数据。

在本指南中，您将学习如何在项目根目录中存储配置文件并在 React 中从中读取值。

使用 JSON 文件

您可以将配置数据存储在 JSON 文件中。

      {
  "SERVER_URL": "https://example.com/api/",
  "THEME_COLORS": {
    "PRIMARY": "#007bff",
    "SECONDARY": "#fc3"
  }
}
    

就像组件一样，可以使用import语句加载 JSON 文件。

      import configData from "./config.json";
    

然后，您就可以像使用任何其他 JavaScript 对象一样使用该数据。例如，configData.SERVER_URL将为您提供config.json文件中指定的服务器 URL。

使用 .env 文件

.env文件允许您创建环境变量，其作用类似于本地 JavaScript 文件中声明的变量，但可全局访问。环境变量是只读的。这意味着您无法在 JavaScript 文件中动态更改它。

要声明环境变量，请在 React 项目的根目录中创建一个 .env 文件。请注意，React 中的环境变量必须以REACT_APP_为前缀，否则 React 将在打包期间忽略该变量。

      REACT_APP_SERVER_URL=https://example.com/api/
REACT_APP_CLIENT_ID=1097hy67546hbdy2
    

现在您可以使用process.env全局对象直接访问这些变量，而无需添加任何 import 语句。

      const SERVER_URL = process.env.REACT_APP_SERVER_URL;
const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;
    

您还可以使用终端创建临时环境变量。

对于 Windows：

      set "REACT_APP_CLIENT_ID=1097hy67546hbdy2" && npm start

对于 Linux：

      REACT_APP_CLIENT_ID=1097hy67546hbdy2 npm start

请注意，使用终端创建的环境变量是短暂的，并且仅适用于该终端会话。

您还可以根据当前环境为环境变量设置不同的值。对于开发环境，您可以将变量存储在.env.development中。同样，对于生产设置，您可以将变量保存在.env.production中。

您可以参考dotenv文档了解更多详细信息。

使用 Webpack

在 webpack 中，有一个名为 externals 的配置选项，它提供了一种从包中排除依赖项的方法。使用 externals 选项，您可以为应用程序添加可在 JavaScript 文件中的任何位置访问的配置数据。

在您的 webpack.config.js 文件中，添加一个外部选项并将其值设置为包含配置数据的对象。

      {
    //
    externals: {
        'ConfigData': {
            clientID: '1097hy67546hbdy2',
            serverURL: 'https://example.com/api/'
        }
    }
}
    

然后在您的 JavaScript 文件中，通过将ConfigData对象作为外部模块导入来访问它。

      import ConfigData from "ConfigData";

console.log(ConfigData.clientID); // 1097hy67546hbdy2

结论

在 React 应用中，存储配置数据的方式有很多种。但请记住，由于 React 在浏览器上运行，因此任何人都可以检查应用的源代码并查看所有数据。因此，请确保不要将敏感信息（例如私有或秘密 API 密钥）存储在客户端配置文件中，因为它们会在构建过程中捆绑到源代码中。

拥有单独的配置文件可让您即时访问变量，并提高代码库的可维护性，因为所有变量都在同一个文件中。核心应用程序将保持不变，您可以快速部署到具有不同配置的不同服务器。

了解更多

探索 Pluralsight 的这些 React 和 Java 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

如何使用 React 存储和读取配置文件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

介绍

在本指南中，您将学习如何在项目根目录中存储配置文件并在 React 中从中读取值。

使用 JSON 文件

您可以将配置数据存储在 JSON 文件中。

      {
  "SERVER_URL": "https://example.com/api/",
  "THEME_COLORS": {
    "PRIMARY": "#007bff",
    "SECONDARY": "#fc3"
  }
}
    

就像组件一样，可以使用import语句加载 JSON 文件。

      import configData from "./config.json";
    

然后，您就可以像使用任何其他 JavaScript 对象一样使用该数据。例如，configData.SERVER_URL将为您提供config.json文件中指定的服务器 URL。

使用 .env 文件

      REACT_APP_SERVER_URL=https://example.com/api/
REACT_APP_CLIENT_ID=1097hy67546hbdy2
    

现在您可以使用process.env全局对象直接访问这些变量，而无需添加任何 import 语句。

      const SERVER_URL = process.env.REACT_APP_SERVER_URL;
const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;
    

您还可以使用终端创建临时环境变量。

对于 Windows：

      set "REACT_APP_CLIENT_ID=1097hy67546hbdy2" && npm start

对于 Linux：

      REACT_APP_CLIENT_ID=1097hy67546hbdy2 npm start

请注意，使用终端创建的环境变量是短暂的，并且仅适用于该终端会话。

您可以参考dotenv文档了解更多详细信息。

使用 Webpack

在您的 webpack.config.js 文件中，添加一个外部选项并将其值设置为包含配置数据的对象。

      {
    //
    externals: {
        'ConfigData': {
            clientID: '1097hy67546hbdy2',
            serverURL: 'https://example.com/api/'
        }
    }
}
    

然后在您的 JavaScript 文件中，通过将ConfigData对象作为外部模块导入来访问它。

      import ConfigData from "ConfigData";

console.log(ConfigData.clientID); // 1097hy67546hbdy2

结论

了解更多

探索 Pluralsight 的这些 React 和 Java 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南