Question

我正在编写一个简单的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);

如果我尝试从node server.js开始，因为import是ES6，所以会出现错误。如何使用babel启动此服务器以转换import？

我也想开始我的前端代码，而我是用webpack-dev-server --config ./webpack.config.js做的。可以，但是不会启动我的后端（server.js）。

webpack.config.js

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'
  }
};

如您所见，它使用babel转换后端并将其捆绑到dist目录中。我如何开始一切工作，包括转译，并在可能的情况下，观察代码更改？我尝试了以下几个教程，但它们似乎并不能满足我的所有需求。

index.js

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应用程序-通过编译进行前端和后端

0 个答案: