停止观察reactjs中的文件夹变化

2024-02-16

我正在开发一个反应项目,用户可以在其中上传文件,我面临的问题是当我将文件上传到服务器并将该文件保存到位于公共文件夹中的名为 uploads 的文件夹中时,然后当此过程完成页面刷新,这是因为应用程序正在监视任何更改并刷新页面 我知道我可以通过编辑 webpackdevserver.config 文件来停止此操作,但我不知道该怎么做。
webpackdevserver.config:

// @remove-on-eject-begin
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
// @remove-on-eject-end
'use strict';

const fs = require('fs');
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
const paths = require('./paths');
const getHttpsConfig = require('./getHttpsConfig');

const host = process.env.HOST || '0.0.0.0';
const sockHost = process.env.WDS_SOCKET_HOST;
const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
const sockPort = process.env.WDS_SOCKET_PORT;

module.exports = function(proxy, allowedHost) {
  return {
    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
    // websites from potentially accessing local content through DNS rebinding:
    // https://github.com/webpack/webpack-dev-server/issues/887
    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
    // However, it made several existing use cases such as development in cloud
    // environment or subdomains in development significantly more complicated:
    // https://github.com/facebook/create-react-app/issues/2271
    // https://github.com/facebook/create-react-app/issues/2233
    // While we're investigating better solutions, for now we will take a
    // compromise. Since our WDS configuration only serves files in the `public`
    // folder we won't consider accessing them a vulnerability. However, if you
    // use the `proxy` feature, it gets more dangerous because it can expose
    // remote code execution vulnerabilities in backends like Django and Rails.
    // So we will disable the host check normally, but enable it if you have
    // specified the `proxy` setting. Finally, we let you override it if you
    // really know what you're doing with a special environment variable.
    disableHostCheck:
      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
    // Enable gzip compression of generated files.
    compress: true,
    // Silence WebpackDevServer's own logs since they're generally not useful.
    // It will still show compile warnings and errors with this setting.
    clientLogLevel: 'none',
    // By default WebpackDevServer serves physical files from current directory
    // in addition to all the virtual build products that it serves from memory.
    // This is confusing because those files won’t automatically be available in
    // production build folder unless we copy them. However, copying the whole
    // project directory is dangerous because we may expose sensitive files.
    // Instead, we establish a convention that only files in `public` directory
    // get served. Our build script will copy `public` into the `build` folder.
    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
    // Note that we only recommend to use `public` folder as an escape hatch
    // for files like `favicon.ico`, `manifest.json`, and libraries that are
    // for some reason broken when imported through webpack. If you just want to
    // use an image, put it in `src` and `import` it from JavaScript instead.
    contentBase: paths.appPublic,
    contentBasePublicPath: paths.publicUrlOrPath,
    // By default files from `contentBase` will not trigger a page reload.
    watchContentBase: true,
    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
    // for the WebpackDevServer client so it can learn when the files were
    // updated. The WebpackDevServer client is included as an entry point
    // in the webpack development configuration. Note that only changes
    // to CSS are currently hot reloaded. JS changes will refresh the browser.
    hot: true,
    // Use 'ws' instead of 'sockjs-node' on server since we're using native
    // websockets in `webpackHotDevClient`.
    transportMode: 'ws',
    // Prevent a WS client from getting injected as we're already including
    // `webpackHotDevClient`.
    injectClient: false,
    // Enable custom sockjs pathname for websocket connection to hot reloading server.
    // Enable custom sockjs hostname, pathname and port for websocket connection
    // to hot reloading server.
    sockHost,
    sockPath,
    sockPort,
    // It is important to tell WebpackDevServer to use the same "publicPath" path as
    // we specified in the webpack config. When homepage is '.', default to serving
    // from the root.
    // remove last slash so user can land on `/test` instead of `/test/`
    publicPath: paths.publicUrlOrPath.slice(0, -1),
    // WebpackDevServer is noisy by default so we emit custom message instead
    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
    quiet: true,
    // Reportedly, this avoids CPU overload on some systems.
    // https://github.com/facebook/create-react-app/issues/293
    // src/node_modules is not ignored to support absolute imports
    // https://github.com/facebook/create-react-app/issues/1065
    watchOptions: {
      ignored: ignoredFiles(paths.appSrc),
    },
    https: getHttpsConfig(),
    host,
    overlay: false,
    historyApiFallback: {
      // Paths with dots should still use the history fallback.
      // See https://github.com/facebook/create-react-app/issues/387.
      disableDotRule: true,
      index: paths.publicUrlOrPath,
    },
    public: allowedHost,
    // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
    proxy,
    before(app, server) {
      // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
      // middlewares before `redirectServedPath` otherwise will not have any effect
      // This lets us fetch source contents from webpack for the error overlay
      app.use(evalSourceMapMiddleware(server));
      // This lets us open files from the runtime error overlay.
      app.use(errorOverlayMiddleware());

      if (fs.existsSync(paths.proxySetup)) {
        // This registers user provided middleware for proxy reasons
        require(paths.proxySetup)(app);
      }
    },
    after(app) {
      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
      app.use(redirectServedPath(paths.publicUrlOrPath));

      // This service worker file is effectively a 'no-op' that will reset any
      // previous service worker registered for the same host:port combination.
      // We do this in development to avoid hitting the production cache if
      // it used the same host and port.
      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
      app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
    },
  };
};

这里存储上传的文件:
结构APP https://i.stack.imgur.com/7vrV4.png

所以我的问题是这样的:
如何编辑 webpackdevserver.config 文件以停止观看上传文件? 这个问题我找了两天了,没有解决。
提前致谢。


 watchOptions: {
      ignored: ignoredFiles(paths.appSrc),
    },

这确实是列出忽略路径的地方,但是ignoredFiles(paths.appSrc)不是 src 文件夹。如果你看得更高,你会发现ignoredFiles.js来自react-dev-utils module.

const ignoredFiles = require('react-dev-utils/ignoredFiles');

使用react create app,默认ignoredFiles.js返回node_modules文件夹,通过避免观察者浏览所有模块来加快速度。现在可以添加更多文件夹watchOptions.ignored 接受一个数组 https://v4.webpack.js.org/configuration/watch/所以你可以添加你的uploads直接在 watchOptions 中指定路径。

 watchOptions: {
      ignored: [ignoredFiles(paths.appSrc), yourUploadPath],
    },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

停止观察reactjs中的文件夹变化 的相关文章

随机推荐

  • 如何将请求(python)cookie保存到文件中?

    如何使用图书馆requests 在Python中 请求之后 usr bin env python coding utf 8 import requests bot requests session bot get http google c
  • RcppArmadillo 伽马分布在具有相同种子的平台之间有所不同

    我正在研究一套 https github com osorensen BayesMallows 它使用来自 RcppArmadillo 的随机数 该软件包运行 MCMC 算法 为了获得精确的再现性 用户应该能够设置随机数种子 这样做时 看起
  • 如何让django使用电子邮件而不是用户名注册用户

    我正在尝试创建一个使用名字 姓氏 电子邮件和密码注册用户的网站 我尝试编写此表单并在视图中使用它 from django import forms from django contrib auth models import User fr
  • 在循环的括号内定义循环变量可以吗?

    我对 C 很陌生 但在 C 方面有很多经验 我的大学老师告诉我 在 纯 C 中 初始化循环变量是错误的 在循环括号内 他说是因为VS编译器才运行的 由于某些原因 演示文稿中的所有材料还显示了循环 其循环变量在括号之外声明 for int i
  • C# Selenium:单击 iframe 下的按钮

    我的网站下有一个 iframe 模式 我正在尝试单击按钮 但我无法这样做 下面是我的代码 请告诉我 我错过了什么 driver SwitchTo Frame driver FindElement By Id iframeid frame n
  • 如何从没有上下文的类中调用 getResources() ?

    在我的申请中 我有很多课程和活动 Droid 是一个没有上下文的类 Mygame 是一个扩展 SurfaceView 并实现 SurfaceHolder Callback 的类 我正在 mygame 类中创建一个 Droid 对象 并为其设
  • Android Spinner 上的多个 AsyncTasks 问题

    我收到一些错误 我知道问题是什么 但我不知道如何解决 我有4个旋转器 每个微调器都关联一个异步任务 简而言之 当我在 spinner1 上选择一项时 执行填充 spinner2 的第二个 asynctask 所选项目作为参数添加到第二个 a
  • C# 找不到网络路径

    我在通过网络将文件写入远程目录时遇到问题 当我尝试检查目录是否存在时 以下代码失败 if Directory Exists processingPath Directory CreateDirectory processingPath 处理
  • docker 在应该使用 v2 时却使用了 v1 注册表 api

    我正在尝试使用自托管 docker 注册表 v2 我应该能够推送 docker 映像 该映像在运行registry v2 容器的主机服务器 coreos 上本地工作 但是 在另一台机器 也是 coreos 相同版本 上 当我尝试推送到注册表
  • 使用 C# 中的静态类通过事件通知其他订阅者的简单状态机

    我一直在尝试为我的应用程序编写一个简单的静态类状态机 以便在系统状态更改时通知其他控件和代码 我想我几乎已经解决了 但我遇到了一个小问题 我不知道如何解决 这是代码 An enum denoting the 3 States public
  • 使用 Peewee 库批量更新

    我正在尝试使用更新表内的许多记录Peewee图书馆 里面一个for循环 我获取一条记录 然后更新它 但这在性能方面听起来很糟糕 所以我需要批量更新 当前代码如下所示 usernames to update get target userna
  • Android Firebase:设置值不起作用

    我正在尝试通过以下代码向 Firebase 数据库添加测试值 FirebaseDatabase database FirebaseDatabase getInstance DatabaseReference ref FirebaseData
  • 函数式 JavaScript:避免参数突变的良好实践?

    这是一个相当普遍的问题 函数式编程提倡这样的想法 程序是通过函数转换数据 并且应该避免突变 函数内可能除外 函数内被视为抽象的基本单元 但在这个程序中 function foo bar bar k1 bananas return bar v
  • 如何导入子目录中的模块,从而导入同一子目录中的另一个模块?

    在我导入的模块中 我尝试导入位于同一目录中的另一个模块 我的文件看起来像这样 project main py app foo py bar py main py import app foo as Foo foo py import bar
  • UnityWebRequest 在 iOS 中不工作

    给出的例子https docs unity3d com Manual UnityWebRequest html https docs unity3d com Manual UnityWebRequest html正如预期的那样 可以在 Wi
  • 为什么我们在使用Ajax控件时总是需要脚本管理器?

    为什么我们在使用Ajax控件时总是需要脚本管理器 脚本管理器控件是将脚本发送到客户端的控件 该控件是所有 AJAX 相关功能的核心 它管理启用 Ajax 的页面中的所有控件 它还确保部分页面更新按预期发生 http msdn microso
  • 如何从任何 Docker 存储库中提取单个映像?

    docker 存储库包含多个镜像 是否可以从存储库中提取特定图像 当我使用时 docker pull ubuntu 它会下载大约 8 10 个不同版本的 ubuntu 如果有标记的特定图像 您可以使用 tag 或 t 运算符来提取您要查找的
  • Android 加速度计过滤?

    我看到了许多关于过滤加速度计值以抵消重力 高通滤波器 的示例 但其中大多数都是一阶一阶 据说很简单 但是滞后 而且不是最好的 尽管我对滤波器或 DSP 一无所知 这里有人说有更好的解决方案用于DSP来感知运动 遗憾的是 我什至无法想象它会是
  • 无法将 JSON 对象插入 Firebase 实时数据库

    我正在尝试将用户数据存储在我的 Firebase 数据库中 这是我处理 onClick 并将数据发送到数据库的代码 public void onClickStore final View view String name binding g
  • 停止观察reactjs中的文件夹变化

    我正在开发一个反应项目 用户可以在其中上传文件 我面临的问题是当我将文件上传到服务器并将该文件保存到位于公共文件夹中的名为 uploads 的文件夹中时 然后当此过程完成页面刷新 这是因为应用程序正在监视任何更改并刷新页面 我知道我可以通过