求助：Create React App中无法访问app.min.js全局对象App的解决办法

没错，你完全可以通过window.App来访问这个全局对象，这正是解决这个错误的核心方案。

为什么会触发这个错误？ #

在React的模块系统里，全局作用域中的变量不会自动被模块识别。你引入的app.min.js脚本确实把App挂载到了浏览器的全局window对象上，但React模块本身不知道这个外部全局变量的存在，再加上ESLint的no-undef规则会严格检查未在当前模块声明的变量，所以就抛出了"'App' is not defined"的错误。

修改后的代码示例 #

你可以直接在调用时使用window.App，或者先把它赋值给一个变量让代码更整洁：

export const alertMessage = (options = {}) => {
  const defaultOption = {
    type: 'info',
    message: 'message',
    closeInSeconds: 5
  };
  
  if (ALERT_TYPE_CORRECT[options.type] != null) {
    options.type = ALERT_TYPE_CORRECT[options.type];
  }
  
  options.icon = DEFAULT_ALERT_ICON_MAP[options.type];
  
  // 直接通过window访问全局App对象
  window.App.alert(Object.assign(defaultOption, options));
};

或者先在模块顶部声明变量：

// 明确从window上获取全局App对象，提升代码可读性
const App = window.App;

export const alertMessage = (options = {}) => {
  const defaultOption = {
    type: 'info',
    message: 'message',
    closeInSeconds: 5
  };
  
  if (ALERT_TYPE_CORRECT[options.type] != null) {
    options.type = ALERT_TYPE_CORRECT[options.type];
  }
  
  options.icon = DEFAULT_ALERT_ICON_MAP[options.type];
  
  App.alert(Object.assign(defaultOption, options));
};

额外提示：规避脚本加载顺序问题 #

虽然你的app.min.js放在了root div之后，大概率不会出现加载滞后的情况，但为了保险起见，可以加个存在性判断：

export const alertMessage = (options = {}) => {
  // 先检查App全局对象是否已加载完成
  if (!window.App) {
    console.warn('App全局对象尚未加载完成，请检查脚本引入顺序');
    return;
  }
  
  const defaultOption = {
    type: 'info',
    message: 'message',
    closeInSeconds: 5
  };
  
  if (ALERT_TYPE_CORRECT[options.type] != null) {
    options.type = ALERT_TYPE_CORRECT[options.type];
  }
  
  options.icon = DEFAULT_ALERT_ICON_MAP[options.type];
  
  window.App.alert(Object.assign(defaultOption, options));
};

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