我正在使用Node.js
和ReactJS
构建同构应用。
我遇到一种情况,当在一些同构React
组件内部(在客户端和服务器端都呈现)时,我需要只包含客户端依赖(例如某些通知库)。
在服务器端/客户端上工作(编译)的最佳方法是什么?
PS:我对可能的解决方法几乎没有想法,例如检查浏览器env变量(例如一些typeof window !== 'undefined'
)等但我不确定这是一个好方法
答案 0 :(得分:0)
使用服务器上未调用的生命周期方法componentDidMount
,而不是检查窗口是否未定义。
“缺点”是如果您的客户端依赖项增强了一个元素或者更改了它的任何属性,它将首先获得默认属性,因为它是在服务器端呈现的,而componentDidMount
运行它时变得引起“眨眼”。
答案 1 :(得分:0)
如果您使用的是browserify,我经常使用process.browser
,这只适用于浏览器化代码。
如果您希望从浏览器中获取幻想并删除服务器代码,那么还有isbrowser就可以做到这一点。
另一种方式(webpack或browserify)是利用package.json中的browser field。你可以使服务器需要一个noop文件,浏览器需要一个文件暴露客户端api。
答案 2 :(得分:0)
我已经在webpack配置文件中定义了一个名为process.env.WEBPACK的变量,在我的代码中,当我需要像bottstrap js或者别的东西我只是写
if(process.env.WEBPACK){
//awesome lib included or scss or whatever
}