我有以下奇怪的情况:我正在使用 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
文件夹中,而它们在该文件夹中存在冲突。我该如何解决这个问题,以便我仍然拥有一个可部署的应用程序?
我建议你创建四个Vite项目,并在ES模块中使用
single-spa
(请参阅我的插件,vite-plugin-single-spa
)。对于独立项目,您可以安装所需的 three.js
版本,而不会发生冲突。其中每一个都是 single-spa
微前端 项目。
第四个项目将是
single-spa
根项目,并将加载与用户选择相匹配的微前端。
到目前为止,您的要求应该得到满足,除了“一个可部署应用程序”的要求。
此时您需要决定:“我可以接受 4 次部署吗?”如果是的话,你就完成了。根据
single-spa
的架构设置 4 个不同项目的 4 个部署。
如果您回答“否”,则致力于创建单个部署。你可能知道,Vite 的输出是静态网站(静态文件)。构建每个项目,然后将构建结果收集到一台服务器部署中,瞧。