如何访问 Javascript 对象中的窗口变量？答案

【问题标题】：How to access window variable in Javascript object?如何访问 Javascript 对象中的窗口变量？
【发布时间】：2020-03-14 12:52:42
【问题描述】：

下面的代码正确吗？我想访问 javascript 对象中的 window 变量。

export const configs={
  //firebase configuration
  apiKey: window._env_.API_KEY,
  projectId: window._env_.PROJECT_ID,
  messagingSenderId: window._env_.MESSAGING_SENDER_ID,
  backendURL: window._env_.BACKEND_URL
}

【问题讨论】：

您在哪里以及如何设置这些变量？你也可以展示那部分吗？为了安全起见，只需将 xxxx 替换为实际的 API_KEY 值即可。
真的取决于这段代码的上下文。从语法上看，它至少不是无效的。

标签： javascript reactjs

【解决方案1】：

如果此代码在浏览器中执行，window 可用作全局对象。但是，如果此代码在节点环境（服务器端）中执行，window 将是未定义的。

如果您的代码将同时执行服务器端（节点环境）和客户端（浏览器环境），这是处理此问题的一种方法：

if (typeof window !== 'undefined') {
  configs = {
    //firebase configuration
    apiKey: window._env_.API_KEY,
    projectId: window._env_.PROJECT_ID,
    messagingSenderId: window._env_.MESSAGING_SENDER_ID,
    backendURL: window._env_.BACKEND_URL
  }
} else {
  // handle server-side logic here
}

如果不需要在浏览器中执行此操作，最简单的方法是使用process.env 而不是在窗口上设置这些变量。如果您在两个地方都需要这些变量（并且它们来自process.env），这可能是另一种解决方案：

const env = typeof window === 'undefined' ? process.env : window._env_;

export const configs = {
  //firebase configuration
  apiKey: env.API_KEY,
  projectId: env.PROJECT_ID,
  messagingSenderId: env.MESSAGING_SENDER_ID,
  backendURL: env.BACKEND_URL
}

【讨论】：

【解决方案2】：

你应该创建一个新的js文件，然后写如下。文件名为 appsettings.js

window.appSettings = {
    apiKey: '${REACT_API_KEY}',
    projectId: '${REACT_PROJECT_ID}',
    messagingSenderId: '${REACT_SENDER_ID}',
    backendURL: '${REACT_BACKEND_URL}'
};

环境文件

REACT_API_KEY=value
REACT_PROJECT_ID=value
REACT_SENDER_ID=value
REACT_BACKEND_URL=value

公开/index.html

<script src="http://localhost/appsettings.js?v={version}"></script>
    <script>
        window.appSettings.apiKey= '%REACT_API_KEY%';
        window.appSettings.projectId= '%REACT_PROJECT_ID%';
        window.appSettings.messagingSenderId= '%REACT_SENDER_ID%';
        window.appSettings.backendURL= '%REACT_BACKEND_URL%';
    </script>

想用的地方，写这段代码

window.appSettings.apiKey

不需要声明另一个地方，因为它声明了 index.html

【讨论】：