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

Question

我正在构建一个带有webpack，React，ES6和fluxible的同构应用程序，并且已经遇到有关浏览器特定模块导入的以下问题。

例如，我想在我的React组件中使用imagesloaded。这个代码如下所示：

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. 创建虚假的窗口实例。 AFAIK，imagesloaded不依赖于特定于浏览器的功能，只使用窗口作为全局命名空间，因此您可以为其创建别名。

喜欢这段代码：

global.window = global