教程：加载 js-confetti
介绍
在本教程中，您将学习如何使用 Nuxt Scripts 模块加载 js-confetti 脚本。
您将了解以下内容
useScriptNpm注册表脚本是什么。- 如何使用它加载
js-confetti脚本。 - 向加载的脚本添加类型。
- 使用 代理函数 来调用脚本。
useScriptNpm 背景
要加载脚本，我们将使用 useScriptNpm。
这是一个 注册表脚本，一个基于 useScript 可组合组件构建的受支持的第三方集成，它允许您从 NPM 加载脚本。
在使用 NPM 文件时，通常会将它们作为 package.json 文件中的节点模块依赖项包含进来。但是，优化这些脚本的脚本加载可能很困难，需要从单独的块动态导入模块，并在需要时才加载。它还会减慢您的构建速度，因为模块需要被转译。
useScriptNpm 注册表脚本抽象了这个过程，允许您加载已导出为立即调用函数的脚本，只需一行代码即可。
在许多情况下，将脚本作为 package.json 文件中的依赖项包含进来仍然更有意义，但对于不太常用或对应用程序不至关重要的脚本，这可能是一个很好的替代方案。
首先，我们可以将使用此脚本视为 useHead 可组合组件的替代方案。您可以在以下代码示例中看到抽象层示例。
useScriptNpm({
packageName: 'js-confetti',
file: 'dist/js-confetti.browser.js',
version: '0.12.0',
})
加载脚本
在您的其中一个组件中，您需要加载脚本。您可以通过使用 useScriptNpm 注册表脚本来完成此操作。
<script setup lang="ts">
useScriptNpm({
packageName: 'js-confetti',
file: 'dist/js-confetti.browser.js',
version: '0.12.0',
})
</script>
如果您检查浏览器的请求，您应该会看到脚本正在加载。
解析第三方脚本 API
现在脚本已加载，您可以在组件中使用它。为此，我们需要告诉底层 API 如何使用脚本，为此，我们可以利用 use 函数。
此函数仅在客户端调用，用于解析第三方脚本。
<script setup lang="ts">
useScriptNpm({
packageName: 'js-confetti',
file: 'dist/js-confetti.browser.js',
version: '0.12.0',
scriptOptions: {
// tell useScript how to resolve the third-party script
use() {
return { JSConfetti: window.JSConfetti }
},
},
})
</script>
使用第三方脚本 API
现在我们有了解析第三方脚本 API 的方法，我们可以开始使用它了。
js-confetti 库要求我们每次使用时都实例化一个新的 JSConfetti 类，处理此问题的最兼容方法是显式等待脚本加载。
但是，如果我们更喜欢使用更易于使用的 API，我们也可以使用 代理函数。请注意，这将在页面之间切换时中断，因为 new window.JSConfetti() 需要在页面之间调用。
<script setup lang="ts">
const { onLoaded } = useScriptNpm({
packageName: 'js-confetti',
file: 'dist/js-confetti.browser.js',
version: '0.12.0',
scriptOptions: {
use() {
return { JSConfetti: window.JSConfetti }
},
},
})
onLoaded(({ JSConfetti }) => {
// using the real API instance
const confetti = new JSConfetti()
confetti.addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
})
</script>
恭喜！脚本加载完成后，您应该会看到一些表情符号。
但是，您会注意到这里存在一个类型问题。 addConfetti 函数没有类型，因此我们不会获得任何智能感知或类型检查。
添加类型
您可以使用 useScriptNpm 可组合组件中的泛型来向脚本添加类型，并向窗口对象添加全局类型。
<script setup lang="ts">
export interface JSConfettiApi {
JSConfetti: {
new (): {
addConfetti: (options?: { emojis: string[] }) => void
}
}
}
declare global {
interface Window extends JSConfettiApi {}
}
const { onLoaded } = useScriptNpm<JSConfettiApi>({
packageName: 'js-confetti',
file: 'dist/js-confetti.browser.js',
version: '0.12.0',
scriptOptions: {
use() {
return { JSConfetti: window.JSConfetti }
},
},
})
onMounted(() => {
onLoaded(({ JSConfetti }) => {
const confetti = new JSConfetti()
// fully typed!
confetti.addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
})
})
</script>
奖励：基于事件的脚本加载
您可以使用 trigger 选项延迟脚本加载。如果您想在某个事件或时间之后加载脚本，这可能很有用。
在此示例中，我们将结合使用 useScriptTriggerElement 可组合组件和 useScriptNpm 可组合组件，以在某个元素可见后加载脚本。
<script setup lang="ts">
const mouseOverEl = ref<HTMLElement>()
const { onLoaded } = useScriptNpm({
// ..
scriptOptions: {
trigger: useScriptTriggerElement({ trigger: 'mouseover', el: mouseOverEl })
}
})
// ..
onMounted(() => {
onLoaded(({ JSConfetti }) => {
const confetti = new JSConfetti()
confetti.addConfetti({ emojis: ['L', 'O', 'A', 'D', 'E', 'D'] })
})
})
</script>
<template>
<div ref="mouseOverEl">
<h1>Hover over me to load the confetti</h1>
</div>
</template>
奖励：捆绑脚本
由于脚本来自 NPM 并已版本化，我们可以安全地将其与我们的应用程序捆绑在一起。这将减少所需的 DNS 请求次数，从而提高应用程序的性能。
要捆绑脚本，您可以使用 bundle 选项。
<script setup lang="ts">
const script = useScriptNpm({
// ...
scriptOptions: {
bundle: true
}
})
// ..
</script>
您应该会看到脚本从您的应用程序服务器加载。
结论
在本教程中，您学习了如何使用 useScriptNpm 注册表脚本加载 js-confetti 脚本。
要详细了解您探索的特定概念，请查看 关键概念 的文档。