为什么使用nodemon启动快速服务器无法显示反应组件？

时间：2017-06-19 16:43:42

标签： javascript node.js reactjs express

我有一个快速应用程序，我执行npm run bundle来构建bundle.js并将该文件放在views目录中。问题是，当我执行npm start时，它无法显示反应组件，但是当我通过浏览器打开index.html时，如何正常工作，如何正确启动快速服务器以及正确的渲染反应组件？< / p>

app.js

"use strict"
import path from 'path'
import express from 'express'
// routes
const app = express()
app.set('view engine', 'ejs');

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'views/index.html'))
})

app.listen(process.env.PORT || 3000, function () {
  console.log('Example app listening on port 3000!')
})

export default app

的观点/ index.html中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  </body>
</html>

反应/ index.js

import React from 'react'
import ReactDOM from 'react-dom'

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

export default HelloMessage

ReactDOM.render(<HelloMessage name="Tsao" />, document.getElementById('app'))

的package.json

  "scripts": {
    "test": "nyc mocha",
    "start": "nodemon app.js --exec babel-node",
    "coverage": "nyc report --reporter=text-lcov | coveralls",
    "bundle": "webpack",
    "build": "babel server --out-dir build && webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base views"
  }

webpack.config.js

module.exports = {
  entry: [
    './react/index.js',
  ],
  output: {
    path: `${__dirname}/views`,
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015','stage-3','react']
          }
        }
      }
    ]
  },
};

0 个答案:

没有答案