Resolving

Nuxt Kit 提供了从 Nuxt 根目录或自定义基准路径解析路径的实用工具。

有时你需要解析一个不知道其名称或扩展名的路径。例如，你可能想添加一个位于模块同一目录中的插件。为处理这些情况，Nuxt 提供了一系列解析路径的实用工具。resolvePath 默认从 Nuxt 根目录解析路径，而 resolveAlias 会应用已配置的别名。findPath 在给定的路径集中找到第一个存在的文件。createResolver 创建相对于基准路径的解析器。

`resolvePath`

解析文件或目录的完整路径，遵守 Nuxt 别名和扩展名选项。如果无法解析某个路径，会返回一个规范化后的输入路径。

用法

import { defineNuxtModule, resolvePath } from '@nuxt/kit'

export default defineNuxtModule({
  async setup () {
    const entrypoint = await resolvePath('@unhead/vue')
    console.log(`Unhead 入口是 ${entrypoint}`)
  },
})

类型

function resolvePath (path: string, options?: ResolvePathOptions): Promise<string>

参数

path：要解析的路径。

options：传给解析器的选项。该对象可以包含以下属性：

属性	类型	必填	描述
`cwd`	`string`	`false`	解析路径的基准。默认为 Nuxt rootDir。
`alias`	`Record<string, string>`	`false`	别名的对象。默认为 Nuxt 配置的别名。
`extensions`	`string[]`	`false`	要尝试的文件扩展名。默认为 Nuxt 配置的扩展名。
`virtual`	`boolean`	`false`	是否解析存在于 Nuxt VFS 中的文件（例如，作为 Nuxt 模板）。
`fallbackToOriginal`	`boolean`	`false`	如果解析出的路径不存在，是否回退到原始路径，而不是返回规范化后的输入路径。

resolvePath 遵循标准的模块解析规则，不会搜索嵌套在其他包内部的依赖。要解析由你的 Nuxt 模块声明的依赖，请使用 createResolver(import.meta.url).resolvePath()。这使得解析不受包管理器是否提升（hoist）该依赖的影响。 :

示例

import { defineNuxtModule, resolvePath } from '@nuxt/kit'
import { join } from 'pathe'

const headlessComponents: ComponentGroup[] = [
  {
    relativePath: 'combobox/combobox.js',
    chunkName: 'headlessui/combobox',
    exports: [
      'Combobox',
      'ComboboxLabel',
      'ComboboxButton',
      'ComboboxInput',
      'ComboboxOptions',
      'ComboboxOption',
    ],
  },
]

export default defineNuxtModule({
  meta: {
    name: 'nuxt-headlessui',
    configKey: 'headlessui',
  },
  defaults: {
    prefix: 'Headless',
  },
  async setup (options) {
    const entrypoint = await resolvePath('@headlessui/vue')
    const root = join(entrypoint, '../components')

    for (const group of headlessComponents) {
      for (const e of group.exports) {
        addComponent(
          {
            name: e,
            export: e,
            filePath: join(root, group.relativePath),
            chunkName: group.chunkName,
            mode: 'all',
          },
        )
      }
    }
  },
})

`resolveAlias`

解析路径别名，遵守 Nuxt 别名选项。

类型

function resolveAlias (path: string, alias?: Record<string, string>): string

import { defineNuxtModule, findPath } from '@nuxt/kit'
import { join } from 'pathe'

export default defineNuxtModule({
  async setup (_, nuxt) {
    // 解析主组件（app.vue）
    const mainComponent = await findPath([
      join(nuxt.options.srcDir, 'App'),
      join(nuxt.options.srcDir, 'app'),
    ])
  },
})

类型

function findPath (paths: string | string[], options?: ResolvePathOptions, pathType: 'file' | 'dir'): Promise<string | null>

参数

paths：要解析的一个路径或一组路径。

options：传给解析器的选项。该对象可以包含以下属性：

属性	类型	必填	描述
`cwd`	`string`	`false`	解析路径的基准。默认为 Nuxt rootDir。
`alias`	`Record<string, string>`	`false`	别名的对象。默认为 Nuxt 配置的别名。
`extensions`	`string[]`	`false`	要尝试的文件扩展名。默认为 Nuxt 配置的扩展名。
`virtual`	`boolean`	`false`	是否解析存在于 Nuxt VFS 中的文件（例如，作为 Nuxt 模板）。
`fallbackToOriginal`	`boolean`	`false`	如果解析出的路径不存在，是否回退到原始路径，而不是返回规范化后的输入路径。

`createResolver`

创建相对于基准路径的解析器。

观看 Vue School 关于 createResolver 的视频。 :

用法

import { createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (_, nuxt) {
    const { resolve, resolvePath } = createResolver(import.meta.url)
  },
})

类型

function createResolver (basePath: string | URL): Resolver

参数

basePath：用作基准的解析路径。可以是字符串或 URL。

返回值

createResolver 函数返回一个包含以下属性的对象：

属性	类型	描述
`resolve`	`(path: string) => string`	一个相对于基准路径解析路径的函数。
`resolvePath`	`(path: string, options?: ResolvePathOptions) => Promise<string>`	一个相对于基准路径解析路径、并遵守 Nuxt 别名和扩展名选项的函数。

示例

import { createResolver, defineNuxtModule, isNuxt2 } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    nuxt.hook('modules:done', () => {
      if (isNuxt2()) {
        addPlugin(resolver.resolve('./runtime/plugin.vue2'))
      } else {
        addPlugin(resolver.resolve('./runtime/plugin.vue3'))
      }
    })
  },
})