如何从服务器端打包跳过React组件？

Question

在react组件中，我使用的JS库依赖于浏览器环境。我通过在脚本标记中指定源来使用它。但是从Webpack为服务器端打包时，我从使用该库引用的组件中得到错误，因为它无法从服务器端找到它。

可能是什么解决方案？

Answer 1

通常当我这样做时，我在webpack中添加一个环境变量，然后在任何功能检查中查看该环境变量是否存在。如果它没有，则您在浏览器中。如果是的话，你就在服务器上。

您还可以执行检查window是否已定义的操作。基本上检查一下你在哪个环境中使用条件来执行代码。

Answer 2

您可以在代码上执行此操作：

const Foo = () => <div>Hello</div> 
const Bar = () => <div>World</div>

...
render () {
  return (typeof document === 'undefined')
     ? <Foo />
     : <Bar />
}
....