在 React.js 中使用环境变量

Managed Runtime 环境变量允许您将变量添加到环境中运行的应用程序进程，而无需更改代码。环境变量被安全存储，使其非常适合以下用例：

调用受 API 密钥保护的第三方资源
有条件地更改 React.js 渲染

有关详细信息，请参阅环境变量。

在本教程中，我们将在不更改代码的情况下使用环境变量更改 React.js 渲染。您可以通过 process.env 访问环境变量，这仅在 Node.js 中可用，在浏览器中不可用。PWA Kit 渲染是同构的，因为它在客户端和服务器上渲染。因此，要使环境变量在 React.js 中可用，您可以将它们添加到PWA Kit配置文件中，如本教程所示。

在此示例中，我们将使用环境变量在您的站点上启用功能。例如，在有限的时间内，您可以测试一项新功能，例如快速结账。然后，您可以监控购物者对该功能的参与度，以了解其影响。

前提条件

要完成本教程，首先：

获取对 Managed Runtime 和 Runtime Admin 的访问权限。请参阅 Managed Runtime 管理。
拥有使用 Managed Runtime API 的 API 密钥。要查找您的 API 密钥，请登录 Runtime Admin 工具并转到帐户设置页面。
在要为其设置环境变量的项目中具有开发人员或管理员角色。如果您没有访问权限，请具有 Managed Runtime 管理员角色的人员为您提供帮助。

在本地计算机上

在运行本教程中的命令之前，请将所有占位符替换为实际值。占位符的格式如 $PLACEHOLDER。

本地测试前提条件

在您的项目中，创建您选择的内容或功能。例如，在主页上创建主推横幅。

在本地测试环境变量

要在当前会话中设置环境变量，请打开终端并运行以下命令：
- Windows： set ENABLE_FEATURE='true'
- 大多数类 Unix 操作系统，包括 macOS： export ENABLE_FEATURE=‘true’
通过运行以下命令检查环境变量是否设置正确：
- Windows： echo %$ENABLE_FEATURE%
- 大多数类 Unix 操作系统，包括 macOS： echo $ENABLE_FEATURE
该命令返回以下输出：true
将此 JavaScript 代码添加到项目 — 的配置文件中config/default.js：

1function parseEnvVar(envVarName) {
2  const val = process.env[envVarName];
3  if (val === undefined) {
4    throw new Error(`Environment variable ${envVarName} is required.`);
5  }
6  try {
7    return JSON.parse(val);
8  } catch (err) {
9    throw new Error(
10      `Environment variable ${envVarName} must be a valid JSON string.`
11    );
12  }
13}
14module.exports = {
15  app: {
16    enableFeature: parseEnvVar("ENABLE_FEATURE") || false,
17  },
18};

将此 JavaScript 代码添加到项目 — 的主页app/pages/home/index.jsx：

1import { getConfig } from "@salesforce/pwa-kit-runtime/utils/ssr-config";
2
3const Home = () => {
4  const config = getConfig();
5  const enableFeature = config.app.enableFeature;
6  return enableFeature && <h1>My New Feature</h1>
7};
8
9export default Home;

使用 npm start 启动开发服务器，然后在本地导航到主页以查看渲染的功能。

在非生产或生产环境中

建议在非生产环境中测试这些步骤，然后再将更改部署到生产环境。