React中使用@paddle/paddle-js，如何通过环境变量配置认证Token？

纠正一个关键误解 #

process.env 并非只能在服务端组件中使用。在Create React App（CRA）这类主流React脚手架中，只要遵循命名规则配置环境变量，客户端组件完全可以正常访问。

正确配置环境变量的步骤 #

• 在项目根目录创建 .env 文件（不要放在 src 文件夹内）
• 环境变量名必须以 REACT_APP_ 开头（CRA的强制规则，用于过滤敏感变量），格式如下：

  REACT_APP_PADDLE_TOKEN=你的Paddle认证Token
  

• 重启开发服务器：修改.env文件后必须重启，否则新配置不会生效
• 可选：创建 .env.development 和 .env.production 文件，分别配置开发、生产环境的不同Token

排查变量为undefined的常见原因 #

• 检查文件名是否正确：不能拼写错误（比如写成 .env. 或者 env），本地测试可使用 .env.local 覆盖默认配置
• 确认变量名前缀：非 REACT_APP_ 开头的变量会被CRA忽略，无法在客户端访问
• 检查是否有多余空格：变量值前后不要加空格，否则会被视为值的一部分

结合@paddle/paddle-js的使用示例 #

你可以在客户端组件的初始化逻辑中直接使用环境变量，示例代码如下：

import { useState, useEffect } from 'react';
import { Paddle } from '@paddle/paddle-js';

function CheckoutComponent() {
  const [paddle, setPaddle] = useState<Paddle>();

  useEffect(() => {
    const initPaddle = async () => {
      if (!process.env.REACT_APP_PADDLE_TOKEN) {
        console.error('Paddle Token未配置，请检查.env文件');
        return;
      }
      
      const paddleInstance = await Paddle.Initialize({
        token: process.env.REACT_APP_PADDLE_TOKEN,
        // 其他必要配置（比如环境模式、事件回调等）
      });
      setPaddle(paddleInstance);
    };

    initPaddle();
  }, []);

  // 后续调用paddle实例的逻辑（比如渲染结账按钮）
  return (
    <div>
      {paddle && <button onClick={() => paddle.Checkout.open({ /* 结账参数 */ })}>打开结账页面</button>}
    </div>
  );
}

export default CheckoutComponent;

额外注意事项 #

• 不要将 .env 文件提交到Git仓库，确保项目的 .gitignore 中包含以下规则：

  .env
  .env.local
  .env.development.local
  .env.production.local
  

• 如果使用Vite作为构建工具，环境变量命名规则改为以 VITE_ 开头，访问方式为 import.meta.env.VITE_PADDLE_TOKEN

内容的提问来源于stack exchange，提问作者Ibanez2000