在 nuxt3/vue 应用程序中添加 houdini paintworklet

Question

我正在尝试向我的应用程序中添加一个 paintworklet，但我遇到了很多困难。

worklet 是一个 npm 依赖项，但是 worklet 不能被内联，它们需要像这样注册：

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

我很难过，因为即使目前在我的应用程序中有效，我也不确定这是否是正确的方法，或者它是否适用于生产。目前，我的 url 指向 node_modules 中的一个文件，我不确定 nuxt 是否会对此做任何事情。

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

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

如有任何想法，我们将不胜感激。

Answer 1

如果文件路径在包含 node_modules 的文字字符串中指定，paint worklet 可能看起来在开发模式下工作，但 worklet 文件将 not捆绑在构建输出中：

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

解决方法：导入文件

导入文件使捆绑器能够跟踪文件，并将其包含在构建输出中。 Nuxt 3 默认使用 Vite，Vite docs 描述了如何导入文件以与 paint worklets 一起使用：

Explicit URL Imports

Assets that are not included in the internal list or in assetsInclude, can be explicitly imported as an URL using the ?url suffix. This is useful, for example, to import Houdini Paint Worklets.
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)

由于 CSS.paintWorklet API 仅在浏览器中可用，请确保在 mounted() 挂钩中使用它，这仅发生在客户端：

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

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

demo

在 nuxt3/vue 应用程序中添加 houdini paintworklet

Adding a houdini paintworklet in a nuxt3/vue app

vue.js

nuxt.js

houdini

vuejs3

nuxtjs3

解决方法：导入文件

Explicit URL Imports