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。

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

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

Answer 1

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

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

Answer 2

以下是一个示例设置，允许您进行开发（包括npm包和webpack）

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

给出您的反应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开始， npm运行webpack

我如何结合表达和反应？

2 个答案: