如何处理 Vite 项目中同一个库的 3 个版本冲突？

Question

我有以下奇怪的情况：我正在使用 Vite 和 svelte-ts 模板设置开发一个网络应用程序。在此应用程序中，我必须为基于 WebXR 的增强现实使用不同的库，因此您可以轻松地在它们之间切换（在不同的页面上，或在本例中响应不同路由的精简组件）并比较它们。

问题是，它们都依赖于不同版本的 THREE.js。

• 第一个选项显然是

  THREE.js

  本身的最新版本。
• 第二个选项是

  A-Frame

  ，它甚至不使用不同的版本，而是使用称为“

  super-three

  ”的THREE的分叉版本，但响应相同的全局THREE变量/上下文。
• 第三个选项是

  ModelViewer

  ，它也使用三个，但它是旧版本。

我无法通过 npm 将它们全部安装到同一个 node_modules 文件夹中，因为它们会导致与其依赖项发生冲突。使用“

--legacy-peer-deps

”或“

--force

”选项进行 npm install 将不起作用，因为我无法强迫他们使用一个特定版本（无论如何，超级三都不起作用）。

我无法使用导入别名，因为对于 A-Frame 和 ModelViewer，我无法更改它们内部和全局访问三个的方式。我需要通用应用程序和所有 3 个 webxr 组件访问的共享代码。我尝试进行 monorepo 设置，其中每个 webxr 组件都是其自己的子模块，具有自己的 node_modules 文件夹，根级别中有一个“共享”文件夹，但它不断将所有内容安装到根级别 node_modules 中，导致相同的问题。它必须是一个可部署的应用程序。

- / (root level)
   - node_modules/
   - packages/
     - three/
       - src/
       - package.json
       - ...
     - aframe/
       - src/
       - package.json
       - ...
     - model-viewer/
       - src/
       - package.json
       - ...
   - shared
     - src
     - package.json
     - ...remaining vite, typescript and svelte stuff

我还尝试用 svelte 编写我的整个应用程序，但随后让 3 个 webxr 页面只是静态 html 页面，我通过

<script></script>

标签链接到加载 deps 的位置，但随后我无法在那里使用和导入我的共享代码。我想我必须将其预编译成一些标准的

shared.js

文件，然后由我的精简组件代码和静态独立页面包含和使用？

动态导入也不起作用，因为它们仍然需要首先将依赖项安装在

node_modules

文件夹中，而它们在该文件夹中存在冲突。我该如何解决这个问题，以便我仍然拥有一个可部署的应用程序？

Answer 1

我建议你创建四个Vite项目，并在ES模块中使用

single-spa

（请参阅我的插件，

vite-plugin-single-spa

）。对于独立项目，您可以安装所需的

three.js

版本，而不会发生冲突。其中每一个都是

single-spa

微前端 项目。

第四个项目将是

single-spa

根项目，并将加载与用户选择相匹配的微前端。

到目前为止，您的要求应该得到满足，除了“一个可部署应用程序”的要求。

此时您需要决定：“我可以接受 4 次部署吗？”如果是的话，你就完成了。根据

single-spa

的架构设置 4 个不同项目的 4 个部署。

如果您回答“否”，则致力于创建单个部署。你可能知道，Vite 的输出是静态网站（静态文件）。构建每个项目，然后将构建结果收集到一台服务器部署中，瞧。