Wie kann ich Express und Reagieren kombinieren?

Question

Ich erhalte einen Fehler mit dem twitter npm-Modul, wenn ich mein reactive-Projekt mit webpack mit webpack-dev-server starte.

Der Fehler ist:

*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)* 

Und ich bekomme es nur, wenn ich twitter benötigen. Mein aktuelles Projektsetup verwendet webpack und babel.

Eine Lösung, die ich ausprobiert habe, ist, einen Express-Server einzurichten, der alle meine API-Aufrufe behandelt, während ich das gesamte Frontend mit React rendere. Ich habe versucht, mehrere Tutorials zu finden, wie Express mit React zu integrieren, aber keiner von ihnen war sehr klar.

Was ist der beste Weg, um ein Projekt einzurichten, so dass Sie verschiedene Knotenmodule integrieren können, ohne diese Art von Fehlern zu bekommen, und wie gehen Sie mit React with Express vor?

Answer 1

Es scheint, Ihren Lader einschließlich node_modules und der Bibliothek Sie eine JSON-Datei verwenden, die webpack nicht in der Lage ist, zu bündeln, weil Sie json-loader mit npm install json-loader installieren json-loader fehlen und konfigurieren Sie Ihre webpack json-Dateien zu verarbeiten.

By the way you should exclude node_modules if you don't need to bundle it.

Answer 2

Hier ist ein Beispiel einrichten, die Sie für die Entwicklung (NPM-Paket und webpack enthalten)

1. 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" 
       } 
   } 
   

2. webpack.config

   erhalten können

   //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'] } 
        }], 
        } 
       ] 
       } 
   } 
   

3. Beispiel server.js Setup

   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); 
   }) 
   

4. gegeben Ihr index.js reagieren, ist dies ein Beispiel für den Import, was Sie

   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')); 
   

kurz benötigen, schauen Sie am Eintrittspunkt in webpack .config.js können Sie sehen, dass es "react-client/src" betrachtet und index.js findet.

das Skript auszuführen, einfach npm Start tun, Sounds npm laufen webpack