safety-eval-service-frontend/.cursor/skills/specs/14-环境变量与数据访问/03-全局环境变量注入/SKILL.md

2.2 KiB
Raw Permalink Blame History

name description
jjb-global-env-inject 定义 JJB 全局环境变量注入规范。在使用 contextInject、process.env.app、window.process.env.app、iframe 或云组件访问变量时查阅。

环境变量与数据访问

全局环境变量注入

  • 配置来源:全局环境变量配置来源于根目录 jjb.config.js 文件中的 contextInject 属性

  • 配置结构

    // jjb.config.js
    {
      contextInject: {
        appName: '应用名称',
        version: '1.0.0',
        // 可注入任意自定义变量
      }
    }
    
  • 注入机制contextInject 中配置的所有属性会自动注入到 process.env.app 对象中

  • 访问方式:在代码中通过 process.env.app.变量名 访问注入的全局变量

    • 示例

      // 配置
      {
        contextInject: {
          appName: '应用名称'
        }
      }
      
      // 访问
      const appName = process.env.app.appName; // '应用名称'
      
  • 双重访问方式:除了通过 process.env.app 访问变量,还可以通过 window.process.env.app 访问变量,它们是等价的

    • 实现机制window.process.env.app 实际上是在 index.html 模板中手动绑定 process.env.app

    • 使用场景区别

      • process.env.app:只能在应用内使用,一旦脱离应用就无法访问

      • window.process.env.app:挂载到 window 对象上,可以在以下场景中访问:

        • iframe 场景:应用中使用 iframe 加载其他网页时,在 iframe 中无法访问 process.env.app,但可以通过 window.process.env.app 访问

        • 云组件场景:在云组件中访问应用的变量时,可以通过 window.process.env.app 访问

    • 示例

      // 应用内访问(两种方式等价)
      const apiHost1 = process.env.app.API_HOST;
      const apiHost2 = window.process.env.app.API_HOST;
      
      // iframe 或云组件中访问(只能使用 window 方式)
      const apiHost = window.process.env.app.API_HOST;
      
  • 使用场景:适用于需要在代码中全局访问的应用配置信息,如应用名称、版本号、业务标识等