我如何结合表达和反应？

Question

当我使用webpack和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。

我尝试过的解决方案就是设置一个快速服务器来处理我所有的API调用，同时使用React渲染所有前端。 我已经尝试过如何将表达式与React结合起来的几个教程，但是没有一个非常清楚 。

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

Answer 1

看来你的加载器包括node_modules和你正在使用的库有一个JSON文件，webpack无法捆绑，因为你缺少json-loader使用npm install json-loader并配置你的webpack来处理json文件。

顺便说一下，如果不需要捆绑node_modules，则应该排除它。

Answer 2

这是一个允许您进行开发的示例设置（包括npm包和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中的入口点，您可以看到它查看'react-client / src'并找到index.js。

要运行脚本，只需执行npm start，npm运行webpack