Node.js读取React文件报错window未定义，构建站点地图遇崩溃

这个问题我太熟悉了——Node.js是服务器端运行环境，压根没有浏览器专属的window对象，而你的Redux store配置里直接引用了window.devToolsExtension，当你在Node环境下（比如生成站点地图）执行这段代码时，自然会抛出ReferenceError: window is not defined的错误。

核心原因 #

你在redux\store.js的第80行写了这样的代码：

window.devToolsExtension ? window.devToolsExtension() : function (f) { ... }

Node.js运行时没有window全局变量，直接访问不存在的全局变量就会触发报错。

解决方案：给window访问加安全判断 #

我们需要先检查当前环境是否存在window对象，再调用devTools扩展。这里有几种可靠的实现方式：

方式1：直接判断window是否存在

修改你的Redux store配置代码，把window.devToolsExtension的调用包裹在安全判断里：

var store = (0, _redux.createStore)(
  _index2.default,
  defaultState,
  (0, _redux.compose)(
    (0, _redux.applyMiddleware)(_reduxThunk2.default),
    // 先判断window是否存在，再调用devToolsExtension
    typeof window !== 'undefined' && window.devToolsExtension 
      ? window.devToolsExtension() 
      : f => f
  )
);

用typeof window !== 'undefined'做检测，能避免直接访问不存在的变量触发报错。

方式2：结合环境变量区分开发/生产

如果只想在开发环境启用devTools，可以同时结合NODE_ENV判断，让生产环境和Node服务器环境自动跳过devTools加载：

const composeEnhancers = 
  process.env.NODE_ENV === 'development' && 
  typeof window !== 'undefined' && 
  window.devToolsExtension 
    ? window.devToolsExtension() 
    : _redux.compose;

var store = (0, _redux.createStore)(
  _index2.default,
  defaultState,
  composeEnhancers(
    (0, _redux.applyMiddleware)(_reduxThunk2.default)
  )
);

方式3：临时Mockwindow（应急用，不推荐）

如果只是在生成站点地图的脚本里临时解决，可以在脚本最顶部手动Mockwindow对象：

// 站点地图生成脚本的开头
global.window = {
  devToolsExtension: () => f => f
};

这种方法属于临时补丁，尽量优先用前两种方式从根源解决问题。

额外提示 #

如果你的项目用了Next.js之类的同构框架，还可以用框架提供的process.browser变量来判断是否在浏览器环境，用法和typeof window !== 'undefined'类似。

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