我如何結合表達和反應？

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