1

我正在使用 webpack、React、ES6 和 Fluxible 构建一个同构应用程序，并且遇到了以下关于浏览器特定模块导入的问题。

例如，我想使用我的 React 组件中加载的图像。代码如下所示：

import React, { PropTypes, Component, findDOMNode } from "react";
import imagesLoaded from "imagesloaded";

但是，显然，它首先尝试在服务器端进行导入，并且代码惨遭失败并出现错误：

ReferenceError: window is not defined

问题是——我应该采取什么方法使代码只包含在浏览器端版本中？我想我正在寻找类似的东西：

if (process.env.BROWSER) {
  require("../style/components/Shop.scss");
}

谢谢！

4

1 回答 1

1

你可以用你提到的完全相同的方式来做，使用require

if (process.env.BROWSER) {
   require("imagesloaded");
}

那可行。还有更多的选择：

  1. 为节点环境提供库的假实例。你可以使用mockery。

  2. 创建窗口的假实例。AFAIK，imagesloaded不依赖于浏览器特定的功能，仅使用 window 作为全局命名空间，因此您可以为其创建别名。

像这样的代码：

global.window = global
于 2015-09-20T10:38:55.390 回答