0

我正在尝试向我的应用程序添加一个paintworklet，但我真的很难。

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

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

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

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

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

任何想法，将不胜感激。

4

1 回答 1

0

如果文件路径是在包含 的文字字符串中指定的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例如，这对于导入Houdini Paint Worklets 很有用。

import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)

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

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

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

演示

于 2021-10-25T20:08:06.227 回答