React.js 使用 Express：在将 Express 用作服务器的同时在客户端呈现一个简单的组件？

Question

我是 ReactJS 的新手并且 Node.js 我肯定被卡住了。我的问题是我无法在我的 index.html 文件中呈现我的简单 React 组件。当我在终端中写入 webpack 时，它会输出一个 bundle.js 文件。然后当我使用 npm start 脚本启动 webpack-dev-server 时，它运行并且我能够转到 localhost:3000，它输出： Image of output。这意味着它不输出 <div id="app"></div>.

当我转到 localhost:3000/bundle/bundle.js 时，它会在浏览器中输出 bundle.js 文件。

我还尝试在终端中使用 node app.js 启动服务器，当我转到 localhost:3000 时它会启动服务器并呈现 index.html 文件，但是它不加载 bundle.js 脚本，而是 404。我尝试以多种方式（../bundle/bundle.js 等）编写 src-attribute，但我无法将其写入工作。

文件夹结构如下。我希望它是可读的

root
  bundle
    bundle.js
  src
    App.jsx
  static
    index.html
  app.js
  package.json
  webpack.config.js

无论如何，我已经搜索了几个小时，但找不到任何解决方案，所以我希望有人能帮助我。我会 post 下面的相关文件。干杯！

app.js

var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var user = require('./models/userModel');

var app = express();

app.use(express.static('static'));

var port = process.env.PORT || 3000;

app.use(bodyParser.json());

app.listen(port);

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Forum</title>
</head>

<body>
  <script src="../bundle/bundle.js"></script>
  <div id="app"></div>
</body>

</html>

App.jsx

var React = require('react');
var ReactDOM = require('react-dom');

var Test = React.createClass({
  render: function() {
    return <h1>Hello world</h1>;
  }
});

ReactDOM.render(<Test />, document.getElementById('app'));

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var DEV = path.resolve(__dirname, 'src');
var OUTPUT = path.resolve(__dirname, 'bundle');

var Config = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    DEV + '/App.jsx'
  ],
  module: {
    loaders: [{
      exclude: './node_modules/',
      loaders: ['react-hot', 'babel-loader']
    }]
  },
  output: {
    path: OUTPUT,
    filename: 'bundle.js'
  },
  devServer: {
    inline: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

module.exports = Config;

package.json

{
  "name": "forum",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 3000"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.15.2",
    "express": "^4.14.0",
    "mongoose": "^4.7.6",
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react-hot-loader": "^1.3.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
}

Answer 1

您服务 /static 但不服务 /bundle。它们是根目录中的两个独立文件夹。解决此问题的一种方法是将您的包输出到您服务的 /static 文件夹中：

// webpack.config.js
var OUTPUT = path.resolve(__dirname, 'static/bundle');

那么您应该可以像这样加载 bundle.js：

<script src="/bundle/bundle.js"></script>

React.js 使用 Express：在将 Express 用作服务器的同时在客户端呈现一个简单的组件？

React.js with Express: Render a simple component on the client-side while using Express as a server?

node.js

express

reactjs

webpack

webpack-dev-server