个人中心
gpt4 book ai didi

express - 为什么我们需要在express.js服务器上使用代理才能获得与react-routing相结合的webpack热重载服务器功能

转载 作者：行者123 更新时间：2023-12-03 13:36:49 24 4
gpt4 key购买 nike

可选信息:我正在尝试制作 this project使用 marty.js 构建和webpack dev server允许来自 react-router 的入口点这样它就不仅仅适用于\路径。

因此，我正在学习THIS整天回答堆栈溢出问题，我无法理解以下代码背后的逻辑以及为什么这个答案有效。

retozi 回答:

I set up a proxy to achieve this:

You have a regular express webserver that serves the index.html on any > route, except if its an asset route. if it is an asset, the request gets proxied to the web-dev-server

your react hot entrypoints will still point directly at the webpack dev server, so hot reloading still works.

Let's assume you run webpack-dev-server on 8081 and your proxy at 8080.

我的代码现在看起来像这样，但为了使其工作，我稍后需要实现 marty-express 。为了实现这一点，我必须首先理解 retonzis 的答案。

express.js 文件

要求

    'use strict';
    var express = require('express');
    var path = require('path');
    var logger = require('morgan');
    var bodyParser = require('body-parser');
    var config = require('../config.json');
    var webpack = require('webpack');
    var WebpackDevServer = require('webpack-dev-server');
    var proxy = require('proxy-middleware');
    var url = require('url');

代理

    var app = express(); //our express instance

    // -------- my proxy----------------------


    app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));//but why do we need a proxy? This line really confuses me.

marty-express **

我打算在理解这个例子后立即使用它，我只是希望它将 react 路由传递到express中。**

    //app.use(require('marty-express')({
    //    routes: require('../routes'),
    //    application: require('../application').Application
    //}));

表达东西

    app.get('/*', function(req, res) {
        res.sendFile(__dirname + '/index.html');
    });//if I got this straight this line just tells express to server my index.html file to all routes. My guess is this will be removed when I implement [marty-express][4].

2 个服务器 webpack-dev-server 和express

        //----- my-webpack-dev-server------------------
    var webpackServer = new WebpackDevServer(webpack(require('../../webpack.config')), {
        contentBase: __dirname,
        hot: true,
        quiet: false,
        noInfo: false,
        publicPath: '/assets/',
        stats: { colors: true }
    });

    //run webpack hot reload server on port 8081
    webpackServer.listen(8081, 'localhost', function() {});

    //run express server on port 8080
    app.listen(8080);

有人可以像我昨天从火星上下来一样向我解释这个概念吗？

我不明白两件事:

  1. 为什么我们需要代理
  2. 如何将react-routes传递到express中，以便在询问时在每条路线上为它们提供服务。(pehaps marty-express 帮助我们完成这项任务，但我猜我们可以在没有它的情况下手动完成这项任务)

啊...帮助我摆脱文档稀缺的困境!!!请慷慨地回答..请记住，我昨天刚从火星回来。

谢谢你..!

最佳答案

你不知道，但这很棘手。所以第一个要求是你有一个可配置的 Assets 根。如果您将来需要 CDN，这也会带来返回。假设它位于环境变量 ASSET_URL 中，在运行 Webpack 开发服务器和 Express 服务器时都可用。

您需要常用的 webpack 开发服务器以及 CORS header 。这让你的主 Express 服务器只需指向 script/link 标签中的 webpack 开发服务器。

ASSET_URL 类似于:http://localhost:8081

网络包

var config = require('./webpack.config');

var port = '8081', hostname = 'localhost';

if (process.env.ASSETS_URL) {
    var assetUrlParts = url.parse(process.env.ASSETS_URL);
    port = assetUrlParts.port;
    hostname = assetUrlParts.hostname;
}

new WebpackDevServer(webpack(serverConfig), {
  publicPath: serverConfig.output.publicPath,
  hot: true,
  headers: { "Access-Control-Allow-Origin": "*" }
}).listen(port, 'localhost', function (err, result) {
  if (err) {
    console.log(err);
    process.exit(1);
  }

  console.log('Listening at ' + url.format({port: port, hostname: hostname, protocol: 'http:'}));
});

然后在你的 webpack 配置文件中你有大部分相同的垃圾。

var port = '8081', hostname = 'localhost';

if (process.env.ASSETS_URL) {
    var assetUrlParts = url.parse(process.env.ASSETS_URL);
    port = assetUrlParts.port;
    hostname = assetUrlParts.hostname;
}

...

  entry: [
    'webpack-dev-server/client?' + url.format({port: port, hostname: hostname, protocol: 'http:'}),
    'webpack/hot/only-dev-server',
    ...

  output: {
    path: __dirname + '/public/',
    filename: 'bundle.js',
    publicPath: process.env.ASSETS_URL || '/public/'

Express 服务器

这里唯一特别的事情是您需要以某种方式将 process.env.ASSETS_URL 放入模板的本地变量中。

<head>
    <link rel="stylesheet" href="{{ assetsUrl }}/main.css">
</head>
<body>
    ...
    <script type="text/javascript" src="{{ assetsUrl }}/bundle.js"></script
</body>

关于express - 为什么我们需要在express.js服务器上使用代理才能获得与react-routing相结合的webpack热重载服务器功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31091702/

24 4 0
文章推荐： x11 - GDK警告-:/build/…/gdkdrawable-x11. c:952 drawable不是像素图或窗口
文章推荐： r - 了解 Shiny Server 上托管的 R Shiny 应用程序的可扩展性
文章推荐： php - JPEG 文件提前结束
文章推荐： reactjs - 是否可以使用 CSSTransitionGroup 根据状态以两种不同的方式进行动画处理？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com