同构应用程序和特定于浏览器的代码

Question

我正在使用 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");
}

谢谢！

Answer 1

您可以按照您提到的完全相同的方式使用 require

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

那行得通。 还有更多选择：

1. 为节点环境提供库的假实例。你可以用mockery，对它来说。

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

喜欢这个代码：

global.window = global