Javascript 启动简单反应应用程序-前端和后端透明

我正在编写一个简单的React应用程序，并将一个简单的Express服务器实现为server.js。这指向dist/index.html

server.js

import express from 'express';
import path from 'path';

const port = 3000;
const app = express();

app.get('*', function (req, res) {
   res.sendFile(path.join(__dirname, './dist/index.html'));
});

app.listen(port);

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App.jsx';
import User from './components/User.jsx';

ReactDOM.render((
  <BrowserRouter>
    <div>
      <Route exact path="/" component={App}/>
      <Route path="/user" component={User} />
    </div>
   </BrowserRouter>
   ), document.getElementById('root')
);

如果我尝试使用

node server.js

启动，我会得到一个错误，因为

import

是ES6。如何使用babel启动此服务器以传输

导入

我还想开始我的前端代码，我是用

webpack dev server--config./webpack.config.js

完成的。这可以正常工作，但不会启动我的后端（server.js）

webpack.config.js

import express from 'express';
import path from 'path';

const port = 3000;
const app = express();

app.get('*', function (req, res) {
   res.sendFile(path.join(__dirname, './dist/index.html'));
});

app.listen(port);

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App.jsx';
import User from './components/User.jsx';

ReactDOM.render((
  <BrowserRouter>
    <div>
      <Route exact path="/" component={App}/>
      <Route path="/user" component={User} />
    </div>
   </BrowserRouter>
   ), document.getElementById('root')
);

如您所见，这使用babel传输后端并将其捆绑到dist目录中。 我如何开始一切，包括透明，如果可能的话，观察代码的变化？我已经尝试了以下几个教程，但它们似乎并没有涵盖我需要的所有内容

index.js

import express from 'express';
import path from 'path';

const port = 3000;
const app = express();

app.get('*', function (req, res) {
   res.sendFile(path.join(__dirname, './dist/index.html'));
});

app.listen(port);

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App.jsx';
import User from './components/User.jsx';

ReactDOM.render((
  <BrowserRouter>
    <div>
      <Route exact path="/" component={App}/>
      <Route path="/user" component={User} />
    </div>
   </BrowserRouter>
   ), document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Route}
从“./components/App.jsx”导入应用程序；
从“./components/User.jsx”导入用户；
ReactDOM.render((
)，document.getElementById（'root'））
);

您是否打算使用节点服务器仅为前端应用程序提供服务？我想从同一台服务器同时为前端和后端提供服务，但现在我认为这不是一个可行的选择。我现在使用webpack dev server（8080）运行前端，并在单独的端口（3001）上使用代理运行后端api。他们似乎说得不错，但我不确定React Express体系结构的“标准”是什么。我也不知道如何使用transpilation运行我的express服务器。我认为没有一个规范-任何有效的方法都可以：）使用代理并使用

webpack dev server

为前端提供服务是一种常见做法。据我所知，node不适合在生产环境中为静态内容（前端）提供服务，而web服务器更适合这样做（例如：

nginx

），因此使用代理在某种程度上类似于生产场景。很高兴你把事情搞定了！谢谢你提供的信息，我意识到它不需要快递。我把React和Express联系得太多了。。。但它们是完全不同的东西。所以从我现在所了解的情况来看，Express非常适合运行基于节点的API，而您的静态内容（包括React库）可以从。。。其他任何地方都可以，明白了！分别处理项目（前端和后端）将有助于保持清晰和易于维护（webpack配置、babelrc、eslint设置……列表如下）