实用工具

NPM

来源
在您的 Nuxt 应用程序中从 NPM 加载 IIFE 脚本。

背景

当使用 NPM 文件时，通常会将它们作为 package.json 文件中的节点模块依赖项包含在内。但是，优化这些脚本的脚本加载可能很困难，需要从单独的块动态导入模块，并且仅在需要时加载它。它还会减慢构建速度，因为模块需要进行转译。

useScriptNpm 注册表脚本抽象了此过程，使您可以使用一行代码加载已作为立即调用函数导出的脚本。

在许多情况下，将脚本作为 package.json 文件中的依赖项包含在内仍然更有意义，但对于不常使用或对应用程序不重要的脚本，这可能是一个很好的替代方法。

首先，我们可以考虑将此脚本用作 useHead 可组合项的替代方法。您可以在以下代码示例中看到抽象层的示例。

useScriptNpm({
  packageName: 'js-confetti',
  file: 'dist/js-confetti.browser.js',
  version: '0.12.0',
})

useScriptNpm

useScriptNpm 可组合项使您可以精确控制何时以及如何加载网站上的 NPM 脚本。

function useScriptNpm<T extends Record<string | symbol, any>>(_options: NpmInput) {}

请遵循 注册表脚本 指南以了解有关高级用法的更多信息。

NpmOptions

export const NpmOptions = object({
  packageName: string(),
  file: optional(string()),
  version: optional(string()),
  type: optional(string()),
})

返回

要获取要加载的脚本的类型，您需要增加 useScriptNpm 函数的类型。

interface SomeApi {
  doSomething: () => void
}
useScriptNpm<SomeApi>({
  packageName: 'some-api'
})

示例

有关更多示例，请参阅 教程：加载 js-confetti。

X Pixel

在您的 Nuxt 应用程序中使用 X Pixel。