Question

我正在尝试使用ReactJS构建我的第一个服务器端渲染。我的代码来自this Redux tutorial

运行>>> Place.objects.filter(name="Bob's Cafe") >>> Restaurant.objects.filter(name="Bob's Cafe")（npm start）时，应用程序正常运行。

我想使用热重载来在dev环境中进行应用程序快速调试。所以我在我的npm配置（webpack && node server.js）上添加了start选项。请注意，我没有index.html文件，因为react-router正在选择要加载的正确JSX文件。

npm start打开我的公共文件夹并显示文件，但是没有启动我的应用程序。通常我会点击index.html文件，但我没有。

我无法理解发生了什么，也不知道如何解决。帮助赞赏。

的package.json：

webpack-dev-server --inline --hot

webpack.config.js：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.prod.js -p",
    "start": "webpack-dev-server --inline --hot",
    "dev": "webpack && node server.js"
  },

server.js

module.exports = {
    entry: './client.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/public'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0']
                }
            }
        ]
    }
};

client.js

require('babel-register')({
    presets: ['react', 'es2015', 'stage-0']
});

var express = require('express');
var config = require('config');
var app = express();

var serverConfig = config.get('serverConfig');

app.use(express.static('public'));
app.use(require('./routes/index.jsx'));

app.listen(serverConfig.port, function () {
    console.log('FactoryWays server running on port ' + serverConfig.port);
    console.log('Press CTRL-C to stop the server.');
});

路由/ index.jsx：

var ReactDOM = require('react-dom');
var React = require('react');
var routes = require('./routes/routes.jsx');
var Redux = require('redux');
var Provider = require('react-redux').Provider;

function reducer(state) { return state; }

var store = Redux.createStore(reducer, window.PROPS);

ReactDOM.render(
    <Provider store={store}>
        {routes}
    </Provider>, document
);

路由/ routes.jsx：

var router = require('express').Router();
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var ReactRouter = require('react-router');
var Redux = require('redux');
var Provider = require('react-redux').Provider;

function reducer(state) { return state; }

router.get('*', function(request, response) {
    var initialState = { title: 'Universal React' };
    var store = Redux.createStore(reducer, initialState);

    ReactRouter.match({
        routes: require('./routes.jsx'),
        location: request.url
    }, function(error, redirectLocation, renderProps) {
        if (renderProps) {
            var html = ReactDOMServer.renderToString(
                <Provider store={store}>
                    <ReactRouter.RouterContext {...renderProps} />
                </Provider>
            );
            response.send(html);
        } else {
            response.status(404).send('Not Found');
        }
    });
});

module.exports = router;

视图/ Layout.jsx：

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var browserHistory = ReactRouter.browserHistory;

module.exports = (
    <Router history={browserHistory}>
        <Route path='/' component={require('../views/Layout.jsx')}>
            <IndexRoute component={require('../views/Index.jsx')} />
        </Route>
    </Router>
);

Answer 1

请注意，我没有index.html文件，因为react-router正在选择要加载的正确JSX文件

如果您正在运行webpack-dev-server，则仍需要一个。

Webpack用于将JavaScript捆绑在一起。就是这样。在您的情况下（根据您的webpack.config.js文件），它会在bundle.js目录中输出public文件。

Webpack Dev Server是一个简单的静态文件服务器，可以帮助开发。它对server.js中的服务器配置一无所知。

package.json中的两个命令需要不同的设置：

<强> npm start

npm start运行webpack-dev-server。默认情况下，webpack-dev-server将提供当前目录的内容，因此您需要将index.html放在项目的根目录中。 index.html的内容很简单：只是包含链接到script文件的bundle.js标记的样板HTML。

<强> npm dev

但是，如果您正在运行npm dev，则需要在server.js中定义自己的服务器。在这种情况下，它被配置为为您生成和提供index.html（以及您需要的所有其他静态文件）。

如果您想热重新加载并运行自己的服务器，可以将webpack-dev-middleware添加到Express服务器。

ReactJS服务器端渲染与热重载（webpack-dev-server）

1 个答案: