如何在组件中使用 R3F 挂钩来使用 Rollup 构建进行测试？

Question

我正在制作一个 R3F 组件库，当我将其导入到我的项目中时，出现错误

Error: R3F: Hooks can only be used within the Canvas component!

，即使该组件放置在 Canvas 组件内。为什么？

我在

package

文件夹内有代码和汇总配置设置GlslPipeline for React。

我在

npm run build

中运行

glsl-pipeline-react

并在

npm link

文件夹中输入命令

package

后正在测试本地。然后我使用

npm link "@glsl-pipeline/react"

将其安装到我的项目文件夹中。它在运行时会产生该错误。请问有人可以帮我吗？

P/s：我对 Rollup 或 Vite 设置不太熟悉。这对我来说是新的。

Answer 1

我现在明白了。我自己的包使用汇总配置，无法使用

npm link

进行测试。这很复杂。我可以使用

examples

文件夹中的预构建工作区来完成此操作，并使用

examples

引用此链接

创建模板代码

在 npm create-vite@latest 文件夹中创建新模板。我可以使用

preconstruct dev && yarn workspaces <example-folder-name> dev

运行测试。

在

examples

文件夹中，安装任何要测试的包，包括你自己当前的包名称（不用担心还没有发布到npmjs。它可以自动引用本地包），然后尝试一下！有效！”