在nuxt3 3/vue应用程序中添加houdini画板

Question

我正在尝试在我的应用程序中添加一个画板，但是我遇到了一个非常困难的时刻。

worklet是npm依赖项，但不能内联，它们需要按如下方式注册：

CSS.paintWorklet.addModule('url/to/module.js');

我有一个困难的时间，因为即使这在我的应用程序目前的工作，我不确定这是正确的方式去做，或它是否将在生产中工作。目前，我的url指向node_modules中的一个文件，我不确定nuxt是否会对此做任何事情。

我目前正在使用插件文件夹中的.client.js文件进行此操作。但是，它们需要一个export default function()，但是worklet代码没有导出。

我目前要做的是告诉nuxt从node_modules中获取某些文件，并以某种方式将它们作为资产使用，然后以其他方式引用它们。但我在这方面找不到任何资源。

任何想法都将不胜感激。

Answer 1

如果文件路径是在包含node_modules的文字字符串中指定的，则绘制工作区可能在开发模式下工作，但该工作文件不会绑定在生成输出中：

CSS.paintWorklet.addModule('./node_modules/extra-scalloped-border/worklet.js')
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                           ❌ file not bundled in build output

解决方案:导入文件

导入文件使绑定程序能够跟踪该文件，并将其包含在构建输出中。默认情况下，Nuxt 3使用Vite，Vite文档描述了如何导入文件以用于绘制工作区：

显式URL导入 未包含在内部列表或assetsInclude中的资产可以使用?url后缀显式导入为?url。例如，这对于导入胡迪尼油漆工场很有用。 从“workletURL /worklet.js?url”导入CSS.paintWorklet.addModule(workletURL)

由于API接口只能在浏览器中使用，所以确保在mounted()钩子中使用它，它只发生在客户端：

import workletURL from 'extra-scalloped-border/worklet.js?url'

export default {
  mounted() {
    CSS.paintWorklet.addModule(workletURL)
  }
}

演示