向 Docusaurus 添加自定义组件

Question

我有一个相当大的角度组件导出为自定义组件，我想将其作为演示加载到我的 docusaurus 文档中。它由多个捆绑包和其他资源组成，全部保存在

node_modules/mycomponent/dist

中。该组件有一个

url

属性，我必须设置该属性，以便它知道从哪里加载所有数据。

对于原型，我只是将

node_modules/mycomponent/dist

中的所有内容复制到

static/mycomponent

中，将 JSX 名称中的组件声明为 IntrinsicElement 以将其与 React 一起使用，只需将其添加到我的文档的 mdx 文件中，设置

url 

属性为

mycomponent

，因此它获取所有资源，并添加加载样式表和脚本部分中

docusaurus.config.js

中的所有内容所需的样式表和脚本，以便加载它们。

一切正常，但不能一直这样。对于最终的解决方案，我特别不想将自定义组件的文件复制到静态目录（问题 A），因为它们是很多文件（> 10mb），并且定期（每 3 周）更改一次。我的第二个目标（问题 B）是不在文档的所有页面上加载自定义组件所需的脚本和样式表，而仅在将显示自定义页面演示的那一页上加载。

问题A：

我尝试查找 docusaurus 插件和现有的解决方案，但它们似乎并没有真正解决我的用例，以便在开发和生产时以简单的方式提供这些文件。您可以使用 postbuild 来复制文件，但这在开发时不起作用。我还考虑尝试使用 copy-webpack-plugin 所以也许 webpack 可以处理这个问题，但我无法让它工作。

我真的希望 docusaurus 能够以某种方式提供一种轻松添加依赖项资产的方法，但我确实花了很多时间没有找到解决方案。任何帮助将不胜感激，因为这可能会终止该功能。

问题B：

我研究了如何将脚本范围限制到演示页面，但 docusaurus 中似乎有本地方法可以做到这一点。

docusaurus.config.js

，

injectHTMLTags

可能的插件解决方案会将其添加到所有页面。通过手动脚本标签加载添加运行时，使用

@docusaurus/Head

或

useScript

也不起作用，因为所有这些都会在页面加载后发生，并且不会执行脚本，因此 Web 组件将无法工作。

我希望 docusaurus 能够提供一种更简单的方法来将脚本和样式表添加到一个文档页面。问题 A 更重要，如果我必须加载所有页面上的所有内容，由于缓存，这可能没问题，但它仍然不适合我。

任何帮助或想法将不胜感激。

Answer 1

对于问题A：

您是否考虑过添加自定义脚本并在

package.json

和

start

上的

build

中调用它？

"copy-component": "node copy-component.mjs",
"start": "yarn copy-component && docusaurus start",
"build": "yarn copy-component && docusaurus build",

问题B：

也许您可以在自定义 React 组件的

useEffect

中加载脚本？这只会将其加载到安装了 React 组件的页面上。