1

我试图在构建期间从远程 URL 加载文件以进行 WebPacked。这个文件是一个 MDX 文件,我正在使用 MDX vue-loader 来加载这个文件,以便在 Vue 应用程序中使用。

我正在部署的系统是使用无头 CMS 租用的,该 CMS 为系统中的某些页面提供动力。我想探索在构建时从远程 URL 加载 MDX 文件的可能性。

我已将 MDX 文件放在 GitHub Pages 上,并在构建时将远程 URL 作为环境变量传入。

结果是这样的(这里的想法是我可以在构建期间交换域以满足租户站点的要求):

import('https://somedomain.com/content/home.mdx');

这在构建过程中失败并出现典型错误: dependencies not found please install them using npm --save https://somedomain.com/content/home.mdx

我可以 WebPack 忽略这个允许它构建的导入,但是它无法在浏览器中加载,因为浏览器只会加载带有 MIME 类型的 JS 的外部模块。更不用说这还没有通过 MDX 加载程序,所以我怀疑即使我可以让浏览器加载它,文件也不会被解析成可用的东西。

我意识到我可以在构建阶段从远程复制这些文件,但我希望有一种方法可以让浏览器拉取这个远程文件,或者让 WebPack 下载这个远程文件并将其打包到输出中。

有没有人有任何想法,如果这可能是可能的?提前谢谢了。

4

1 回答 1

1

由于 MDX 在构建过程中需要预处理,我认为与 Webpack 集成是唯一的方法。

您可以尝试使用SaveRemoteFilePlugin webpack 插件,它允许您将文件从远程下载到本地文件系统。但也许这不是你想要的,因为它似乎将下载的文件直接推送到dist文件夹中,而没有通过 Webpack 管道的其余部分传递它......

所以可能更好的选择是val-loader,它允许在构建期间执行您自己的 Node 脚本 -在这里您可以找到几乎可以满足您需要的示例 - 在构建期间获取远程数据

于 2021-01-16T11:21:15.410 回答