reactjs - 如何修改create-react-app中的index.js文件

Question

我正在尝试修改create-react-app预配置项目中的入口点文件index.js。我试图将项目连接到 mongodb，在 index.js 中添加 body-parser 和 api 文件，但在编辑 index.js 时出现错误。

索引.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(App, document.getElementById('root'));

我的代码:

const express = require('express');
const app = express()
const bodyParser = require('body-parser')
const mongoose = require('mongoose')

mongoose.connect('mongodb://localhost/treedb')
mongoose.Promise = global.Promise
app.use(bodyParser.json())

//initialize routes
app.use('/api', require('./routes/api'))

错误:

TypeError: Cannot read property 'prototype' of undefined
in file node_modules/express/lib/response.js:58:

var res = Object.create(http.ServerResponse.prototype);

当我使用“npm start”启动应用程序并运行“react-scripts start”时，会发生此错误。当我运行“node index.js”时，我的代码很好，但导入语句却导致错误。有什么想法如何编辑index.js 文件而不导致错误吗？谢谢。

Answer 1

正如 @skyboyer 所提到的，您似乎正在使用 Create React App 来达到它不该达到的目的。 Create-React-App 是一个工具包，使您能够快速开始开发基于 React 的 Web 应用程序，而不必担心设置和维护 Webpack 配置等的麻烦。您似乎正在尝试设置一个连接到 MongoDB 的 API 服务器。

如果您只想创建一个 Express 应用程序作为 API 服务器，而不需要任何基于 React 的前端，则不应使用 CRA 来设置它。

最有可能的是，您需要同时拥有:客户端 Web 应用程序(基于 React)和服务器端 API 应用程序(基于 Express)，在这种情况下，您有两个选择:

1. 相同的项目，但有两个源目录。您可以在与 src 相同的级别创建一个文件夹，但使用不同的名称:例如 dataSrc。然后你可以修改你的 package.json 来启动两个服务器。我不建议这样做，除非是出于学习目的，因为这对您来说维护起来会变得很棘手，并且当您需要捆绑并交付给产品时，这将变得很棘手。
2. 为您的 API 服务器创建一个独立于您的网络应用的新项目。

在这两种情况下，为了进行开发，您需要将 Create React App 配置为 proxy the data requests到您的 API 服务器。

希望这能让您清楚一些。如果您仍然感到困惑，请随时要求澄清。