Question

我正在尝试使用Grunt，Browserify，Babel，Babelify，ExpressJS和React从头开发一个Isomorphic React App。我正在使用Grunt将我的源代码编译到构建目录。当我尝试运行使用Browserify和Babelify编译的server.js时，我在编译的server.js中出现此错误：

var xhr = new global.XMLHttpRequest()

TypeError: global.XMLHttpRequest is not a function

我的尝试和假设：

我不知道是否允许在服务器端使用Browserify，因为server.js是在Node中编写的。
问题可能与我在基于Node的server.js文件中需要.JSX文件这一事实有关。为了解决这个问题，我尝试使用node-jsx.install，但这会导致另一个错误。
我尝试使用Reactify，但我不确定如何使用Grunt和Babelify。但是我读到Reactify已经过时了，我应该使用Babel预设。

Gruntfile.js

browserify: {
      dist: {
        options: {
          debug: true,
          transform: [
            ['babelify', {'presets': ['es2015', 'react']}, {'node': true}],
          ]
        },
        files: [
          {
            expand: true,
            cwd: './src/',
            src: ['./**/*.jsx', './**/*.js', './server.js'],
            dest: './build/'
          }
        ]
      }
    }

server.js

var express = require('express');
var app     = express();
var config  = require('./config.js');
var routes  = require('./app/js/routes.jsx');
var Html    = require('./app/js/components/html/html.jsx');
var React   = require('react');
var ReactDOM = require('react-dom/server');
var Router   = require('react-router');
var RouterLocation = require('history').createLocation;

app.use(express.static(__dirname+'/app'));

// route middleware that will happen on every request
app.use(function(req, res, next) {
  Router.match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message);
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search);
    } else if (renderProps) {
      var content = ReactDOM.renderToString(Router.RoutingContext({renderProps}));
      var data = {body: content};
      var html = ReactDOM.renderToStaticMarkup(Html(data));
      res.status(200).send('<!DOCTYPE html>' + html);
    } else {
      res.status(404).send('Not found')
    }
  });
});

app.listen(config.port, function() {
  console.log('Server listening at host: %s', config.host);
});

这是我在Github上的项目的链接：

https://github.com/rashadrussell/isomorphicReactApp

用Babelify编译同构反应＆amp;咕噜

0 个答案: