Question

我正在使用Node.js和ReactJS构建同构应用。

我遇到一种情况，当在一些同构React组件内部（在客户端和服务器端都呈现）时，我需要只包含客户端依赖（例如某些通知库）。

在服务器端/客户端上工作（编译）的最佳方法是什么？

PS：我对可能的解决方法几乎没有想法，例如检查浏览器env变量（例如一些typeof window !== 'undefined'）等但我不确定这是一个好方法

Answer 1

使用服务器上未调用的生命周期方法componentDidMount，而不是检查窗口是否未定义。

“缺点”是如果您的客户端依赖项增强了一个元素或者更改了它的任何属性，它将首先获得默认属性，因为它是在服务器端呈现的，而componentDidMount运行它时变得引起“眨眼”。

Answer 2

如果您使用的是browserify，我经常使用process.browser，这只适用于浏览器化代码。

如果您希望从浏览器中获取幻想并删除服务器代码，那么还有isbrowser就可以做到这一点。

另一种方式（webpack或browserify）是利用package.json中的browser field。你可以使服务器需要一个noop文件，浏览器需要一个文件暴露客户端api。

Answer 3

我已经在webpack配置文件中定义了一个名为process.env.WEBPACK的变量，在我的代码中，当我需要像bottstrap js或者别的东西我只是写

  if(process.env.WEBPACK){
     //awesome lib included or scss or whatever
  }