javascript - 在客户端 react 代码中找不到变量

Question

在研究了同构/通用 javascript 应用程序和服务器端渲染的好处后，我决定在一个项目中使用它。

我正在使用 Express.js 和 React.js 来实现服务器端和客户端渲染。

我最近遇到的一个问题是我的浏览器 javascript 无法找到作为 React 组件的 React 变量。它给出了众所周知的错误消息 ReferenceError: Can't find variable: QuestionBox。

此 React 组件在 questionbox.js 中定义，此文件在由 node.js 中的 babel 转译后用于服务器端，在 后用于客户端渲染>browserifyed 和 rectify 在 gulp 任务中进行。

我错过的重点是什么？它可以是浏览器通过脚本标签加载的 gulp 生成的转换文件。 The full code is in this gist.

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:

var gulp = require('gulp');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var reactify = require('reactify');

var production = process.env.NODE_ENV === 'production';

function scripts(watch) {
  var bundler, rebundle;
  bundler = browserify('src/components/questionbox.js', {
    basedir: __dirname, 
    debug: !production, 
    cache: {}, // required for watchify
    packageCache: {}, // required for watchify
    fullPaths: watch // required to be true only for watchify
  });
  if(watch) {
    bundler = watchify(bundler) 
  }

  bundler.transform(reactify);

  rebundle = function() {
    var stream = bundler.bundle();
    //stream.on('error', handleError('Browserify'));
    stream = stream.pipe(source('bundle.js'));
    return stream.pipe(gulp.dest('./dist/components'));
  };

  bundler.on('update', rebundle);
  return rebundle();
}

gulp.task('watchScripts', function() {
  gulp.watch('./src/components/*.js', ['scripts']);
});

gulp.task('scripts', function() {
  return scripts(false);
});

gulp.task('watchScripts', function() {
  return scripts(true);
});

Answer 1

我认为问题在于该组件没有(实际上不应该)暴露在全局范围内。

browserify 包中的所有代码都无法从外部访问。所以接下来应该做的是将渲染函数移动到包中。

首先，您可以创建新文件(例如，entry.js)并将其设置为 gulpfile.js 中 browserify 的入口点:

bundler = browserify('src/entry.js', {

然后，您可以将 JavaScript 从模板 (.ejs) 移动到此入口点。

var ReactDOM = require('react-dom');
var QuestionBox = require('./components/questionbox.js').QuestionBox;

ReactDOM.render(QuestionBox({}), document.getElementById('mount-node'));

只要 browserify bundle 仅供客户端使用，您无需在服务器上进行任何更改。