在 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 的文字字符串中指定的，则绘制工作集可能会在开发模式下工作，但工作集文件不会捆绑在构建输出中：

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

解决方法：导入文件

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

显式 URL 导入

内部列表或assetsInclude 中未包含的资产可以使用?url 后缀显式导入为URL。这很有用，例如，导入 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