只有当文档存在时才导入库(不在服务器上)

Question

我正在用我的应用程序使用服务器渲染，在使用一个名为反应-dragula的dragula库的react扩展时遇到了一个问题。

问题就在这里

import Dragula from 'react-dragula';

由于某些原因，这使用了document，因此在服务器端呈现过程中会导致错误，因为文档不存在，因此我需要一种只在document可用时包含它的方法，以便可以开始使用它。

Answer 1

没有办法有条件地import某物，但有一种方法。我通常处理这样的问题，就是为服务器和客户端创建单独的构建，并在构建过程中使用process.env vars来区分这两者。它不需要对代码进行太多的修改，但是这样就可以在某种程度上模拟依赖项。

例如，您可以这样做：

import Dragula from './my-dragula-wrapper'

在包装文件中，使用CommonJS require返回正确的模块：

/* my-dragula-wrapper.js */
if(process.env.SOME_VAR === 'server'){
  module.exports = function(){}; // Or something, it's not going to be used anyway
} else {
  module.exports = require('react-dragula');
}

然后，这只是在构建过程中设置正确的process.env.SOME_VAR值的问题，无论是Gulp还是Grunt，还是其他任何一个本周都很酷的东西。

gulp.task('env:server', function(){
    return process.env.SOME_VAR = 'server';
});

gulp.task('env:client', function(){
        return process.env.SOME_VAR = 'client';
});

将此与Browserify或类似的Envify转换一起使用。你应该表现得很好。

Answer 2

我不知道这是不是个好做法。但你能做到的

componentDidMount(){
    var Dragula = require('Dragula')
}

这只会在客户端导入dragula。组件确实挂载永远不会从服务器端运行。

您必须在呈现函数中包含检查，以查看Dragula是否存在。但是像这样的东西会起作用的。我刚刚做到了。

我所做的就是

var something // so that it has scope in all functions 
componentDidMount(){
    something = require('something')
    this.setState({somethingExists: true})
}
render(){
    return(
        <div> {this.state.somethingExists ? <something> : null } </div>
    )
}

Answer 3

增加了丹尼朱莉的建议。

您可以使用“尝试捕捉”而不是“吞咽/咕哝”。

try {
  if(window) 
     module.exports = require('react-dragula');
}  
catch(ex) 
{
 module.exports = function(){};
}