Node.js 如何将表达和反应结合起来？_Node.js_Reactjs_Webpack_Webpack Dev Server

Node.js 如何将表达和反应结合起来？

node.js reactjs webpack

Node.js 如何将表达和反应结合起来？,node.js,reactjs,webpack,webpack-dev-server,Node.js,Reactjs,Webpack,Webpack Dev Server,当我使用webpack with webpack dev server运行react项目时，twitter npm模块出现错误错误是： *ERROR in ./~/twitter/~/request/~/har-validator/lib/schemas/timings.json Module parse failed: /Users/peterkaminski/react-test/node_modules/twitter/node_modules/request/node_modules/

当我使用webpack with webpack dev server运行react项目时，twitter npm模块出现错误

错误是：

*ERROR in ./~/twitter/~/request/~/har-validator/lib/schemas/timings.json
Module parse failed: /Users/peterkaminski/react-test/node_modules/twitter/node_modules/request/node_modules/har-validator/lib/schemas/timings.json Unexpected token (2:12)*

我只有在需要推特的时候才能得到它。我当前的项目设置使用webpack和babel

我尝试过的一个解决方案是，在我使用React呈现所有前端时，只需设置一个express服务器来处理所有API调用。我已经试着找到了一些关于如何将express与React结合起来的教程，但都不是很清楚

设置项目的最佳方法是什么，这样您就可以包含各种节点模块而不会出现此类错误，您如何使用Express运行React？

似乎您的加载程序（包括节点模块）和您正在使用的库有一个JSON文件，而由于缺少JSON加载程序，Web包无法绑定该文件使用npm Install json loader安装json loader，并将您的网页配置为处理json文件

顺便说一下，如果不需要捆绑，您应该排除节点_模块它

似乎您的加载程序（包括节点_模块）和您正在使用的库有一个JSON文件，由于缺少JSON加载程序，Web包无法绑定该文件使用npm Install json loader安装json loader，并将您的网页配置为处理json文件

顺便说一下，如果不需要捆绑，您应该排除节点_模块它

下面是一个示例设置，允许您开始开发（包括npm包和网页包）

package.json

{
  "name": "mvp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon server/server.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --watch"
  },

  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.4",
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "body-parser": "^1.17.2",
    "bootstrap": "^4.0.0-alpha.6",
    "cors": "^2.8.3",
    "dotenv": "^4.0.0",
    "express": "^4.15.3",
    "lodash": "^4.17.4",
    "morgan": "^1.8.2",
    "pg": "^6.2.4",
    "react": "^15.6.0",
    "react-bootstrap": "^0.31.0",
    "react-dom": "^15.6.0",
    "react-transition-group": "^1.2.0",
    "reactstrap": "^4.6.2",
    "sequelize": "^4.0.0",
    "webpack": "^2.6.1"
  },
  "devDependencies": {
    "nodemon": "^1.11.0"
  }
}

webpack.config

//this is a code 
const path = require('path');

const SRC_DIR = path.resolve(__dirname, 'react-client/src');
const BUILD_DIR = path.resolve(__dirname, 'react-client');

module.exports = {
  entry: path.resolve(SRC_DIR, 'index.js'),
  output: {
    filename: 'bundle.js',
    path: BUILD_DIR
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015', 'react'] }
        }],
      }
    ]
  }
}

示例server.js设置

const express = require('express');
const bodyParser = require('body-parser');
const morgan = require('morgan')
const port = 8000
const db = require('../database/config.js')
const todoListRouter = require('./router/todoList.router')
const cors = require('cors')
const app = express()

app.use(express.static('react-client'))
   .use(bodyParser.json())
   .use(bodyParser.urlencoded({extended:true}))
   .use(morgan('dev'))
   .use('/api', todoListRouter)

app.all('*', function(req, res, next){
    res.header("Access-Control-Allow-Origin", "x")
    res.header("Access-Control-Allow-Headers","X-Request-With");
    next();
})

app.listen(port, 'localhost', ()=>{
    console.log("server running on port :" + port);
})

给定react index.js，这是一个导入所需内容的示例

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'
import NavBar from '../src/components/navbar'
import ToDo from '../src/components/todo'
import ToDoBuilder from '../src/components/todobuilder'
import ToDoList from '../src/components/todolist'
import ToDosWithSameUser from '../src/components/todowithsameuser'
....//your component here
ReactDOM.render(<App />, document.getElementById('app'));

import React，{Component}来自“React”
从“react dom”导入react dom
从“axios”导入axios
从“../src/components/NavBar”导入导航栏
从“../src/components/ToDo”导入ToDo
从“../src/components/ToDoBuilder”导入ToDoBuilder
从“../src/components/ToDoList”导入ToDoList
从“../src/components/todowithsameuser”导入ToDosWithSameUser
....//此处显示您的组件
ReactDOM.render（，document.getElementById（'app'））；

简而言之，查看webpack.config.js中的入口点，您可以看到它查看'react client/src'并查找index.js

要运行脚本，只需执行以下操作 npm启动，

npm运行网页包

这里是一个示例设置，允许您开始开发（包括npm包和网页包）