Vite 生产构建文件阻止 React 项目构建

Question

所以我正在做一个 vite React 项目一段时间，而且我对它还很陌生。我有一个根index.html 和dist 文件夹中的index.html。我将一些包含放在根索引中，一些放在 dist 文件夹中。这些包含文件的文件名类似于index-xxxx.js，其中x是一系列随机数字和字母。某种哈希值。我想知道如何使用这个文件，并认为也许我应该只使用不带哈希值的名称来复制生成的文件。我有一个函数，可以加载 src 中的所有文件，并使用 index-xxxx 文件使该函数不加载 dist 文件夹中的文件。

我有一个 App.js 文件和一堆源文件，但没有 src/index.html。我正在尝试在 React 中制作一个可嵌入的小部件。据我所知，我必须在根index.html 中执行此操作，但也许我应该在不同的文件中执行此操作？我不确定，但我认为生成的文件应该有助于清除缓存，对吗？

简而言之，我可以对 index-xxxx 生成的文件做什么，不能做什么，我是否需要一个函数来确保 dist 文件夹中的文件不会被加载。另外，如果有任何资源可以帮助我了解更多有关 vite 生产文件以及可以用它们做什么的信息，我将不胜感激。

来自根index.html的小片段

//the two lines that break the build 

<script type="module" crossorigin src="/feed/dist/assets/index-2b2832fe.js"></script> 
<link rel="stylesheet" href="/feed/dist/assets/index-9c4d15f8.css"> 


/*********************************************************************

this function is where i try to work around these generated files to load all the rest
*******************************************************************/
function loadFilesIfNotInDist(jsFile, cssFile) {
  // Get the current path
  var currentPath = window.location.pathname;

  // Check if the path does not contain "/dist/"
  if (!currentPath.includes('/dist/')) {
    // Function to load a script file
    function loadScript(file) {
      var script = document.createElement('script');
      script.src = file;
      script.type = 'module';
      script.crossOrigin = 'anonymous';
      document.head.appendChild(script);
    }

    // Function to load a CSS file
    function loadCSS(file) {
      var link = document.createElement('link');
      link.href = file;
      link.rel = 'stylesheet';
      document.head.appendChild(link);
    }

    // Load the JS and CSS files
    loadScript(jsFile);
    loadCSS(cssFile);
  } else {
    console.log('Current path contains /dist/, files will not be loaded.');
  }
}

//has to be update after every build
loadFilesIfNotInDist('dist/assets/index-2b2832fe.js', 'dist/assets/index-9c4d15f8.css');

来自 dist/index.html 的片段

<script type="module" crossorigin src="/feed/dist/assets/index-2b2832fe.js"></script> 
<link rel="stylesheet" href="/feed/dist/assets/index-9c4d15f8.css"> 

Answer 1

在基于 vite 的项目中面临类似的问题。最初使用 Create React App 完成，其构建工作正常。似乎有问题链接到 vite 版本和打字稿。 我收到一堆 Uncaught TypeError: $ is not a function 并且该组件不会在基于 vite 的构建中加载