Как я могу комбинировать выражения и реагировать?

Question

Я получаю сообщение об ошибке с модулем twpm npm, когда запускаю свой проект с помощью webpack с webpack-dev-сервером.

Ошибка:

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

Решение, которое я пробовал, заключается в том, чтобы просто настроить экспресс-сервер для обработки всех моих вызовов API, в то время как я визуализую все интерфейсы с помощью React. Я пробовал найти несколько учебников для того, как включить экспресс с React, но ни один из них не был очень ясным.

Каков наилучший способ создания проекта, чтобы вы могли включать в себя различные узловые модули, не получая таких ошибок, и как вы собираетесь работать с React with Express?

Answer 1

кажется ваш загрузчик включая node_modules и библиотеки вы используете есть JSON-файл, который WebPack не умеет связывать, потому что вам не хватает JSon-погрузчик Установите JSon-погрузчик с npm install json-loader и настроить Webpack для обработки JSON файлов.

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

Answer 2

Ниже приведен пример настройки, что позволяет добраться до разработки (НПМ пакет и Webpack включены)

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

   //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. пример 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); 
   }) 
   

4. учитывая ваши реакции 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')); 
   

короче, посмотрите на точку входа в WebPack .config.js, вы можете видеть, что он смотрит на «response-client/src» и находит index.js.

запустить скрипт, просто сделать старт НПМ, НПМ запустить WebPack