在对同构/通用javascript应用程序和服务器端呈现的好处进行了一些研究后，我决定在项目中使用它。
我使用Express.js和React.js来实现服务器端和客户端渲染。
我最近遇到的一个问题是我的浏览器javascript找不到React变量，它是一个React组件。它提供了众所周知的ReferenceError: Can't find variable: QuestionBox的错误消息。
此响应组件在questionbox.js中定义，此文件在node.js中由babel转换后用于服务器端，并在browserify ed {{1}之后进行客户端呈现在rectify任务中编辑。
这里有什么可以忽略的？它可以是由浏览器通过脚本标记加载的gulp生成的转换文件。 The full code is in this gist.
gulp：
questionbox.js var React = require('react');
var marked = require('marked');
/*
-QuestionBox
-QuestionList
-Question
*/
var Question = React.createClass({//Omitted here for simplicity: https://gist.github.com/isikfsc/b19ccb5e396fd57693d2f5b876ea20a0});
var QuestionList = React.createClass({//Omitted here for simplicity: https://gist.github.com/isikfsc/b19ccb5e396fd57693d2f5b876ea20a0});
var QuestionBox = React.createClass({
loadQuestionsFromServer: function() {
return true;
},
getInitialState: function() {
return {data: []};
},
componentWillMount: function() {
this.loadQuestionsFromServer();
setInterval(this.loadQuestionsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="questionBox">
<h1>Questions</h1>
<QuestionList data={this.state.data} />
</div>
);
}
});
module.exports.QuestionBox = QuestionBox;
：
gulpfile.js答案 0 :(得分：1)
我认为问题在于该组件不是（实际上不应该）暴露于全球范围。
浏览器包中的所有代码都无法从外部访问。那么接下来应该做的是将渲染功能移动到束中。
首先，您可以创建新文件（例如ENV['INSTAGRAM_ID']）并将其设置为gulpfile.js中browserify的入口点：
entry.js然后，您可以将JavaScript从模板（.ejs）移动到此入口点。
bundler = browserify('src/entry.js', {
只要客户端使用browserify捆绑包，您就不必更改服务器上的任何内容。