Resolving

Source
Nuxt Kit은 경로를 해석하는 데 도움이 되는 유틸리티 세트를 제공합니다. 이 함수들은 현재 모듈을 기준으로, 이름이나 확장자를 알 수 없는 경로를 해석할 수 있게 해줍니다.

때때로 현재 모듈을 기준으로, 이름이나 확장자를 알 수 없는 경로를 해석해야 할 때가 있습니다. 예를 들어, 모듈과 같은 디렉터리에 위치한 플러그인을 추가하고 싶을 수 있습니다. 이러한 경우를 처리하기 위해, nuxt는 경로를 해석하기 위한 유틸리티 세트를 제공합니다. resolvePath와 resolveAlias는 현재 모듈을 기준으로 경로를 해석하는 데 사용됩니다. findPath는 주어진 경로들 중에서 처음으로 존재하는 파일을 찾는 데 사용됩니다. createResolver는 기준 경로를 기준으로 하는 리졸버를 생성하는 데 사용됩니다.

resolvePath

Nuxt의 alias 및 extensions 옵션을 준수하여 파일 또는 디렉터리의 전체 경로를 해석합니다. 경로를 해석할 수 없는 경우, 정규화된 입력 경로가 반환됩니다.

Usage

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

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

Type

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

Parameters

path: 해석할 경로.

options: 리졸버에 전달할 옵션. 이 객체는 다음 속성을 가질 수 있습니다:

PropertyTypeRequiredDescription
cwdstringfalse경로를 해석할 기준이 되는 위치. 기본값은 Nuxt rootDir입니다.
aliasRecord<string, string>falsealias 객체. 기본값은 Nuxt에 설정된 alias입니다.
extensionsstring[]false시도할 파일 확장자 목록. 기본값은 Nuxt에 설정된 확장자입니다.
virtualbooleanfalseNuxt VFS(예: Nuxt 템플릿으로 존재하는 파일)에 존재하는 파일을 해석할지 여부.
fallbackToOriginalbooleanfalse해석된 경로가 존재하지 않을 때, 정규화된 입력 경로를 반환하는 대신 원래 경로로 폴백할지 여부.

Examples

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의 alias 옵션을 준수하여 경로 alias를 해석합니다.

Type

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

Parameters

path: 해석할 경로.

alias: alias 객체. 제공되지 않으면 nuxt.options.alias에서 읽어옵니다.

findPath

주어진 경로들 중에서 처음으로 존재하는 파일을 해석하려고 시도합니다.

Usage

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'),
    ])
  },
})

Type

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

Parameters

paths: 해석할 경로 또는 경로 배열.

options: 리졸버에 전달할 옵션. 이 객체는 다음 속성을 가질 수 있습니다:

PropertyTypeRequiredDescription
cwdstringfalse경로를 해석할 기준이 되는 위치. 기본값은 Nuxt rootDir입니다.
aliasRecord<string, string>falsealias 객체. 기본값은 Nuxt에 설정된 alias입니다.
extensionsstring[]false시도할 파일 확장자 목록. 기본값은 Nuxt에 설정된 확장자입니다.
virtualbooleanfalseNuxt VFS(예: Nuxt 템플릿으로 존재하는 파일)에 존재하는 파일을 해석할지 여부.
fallbackToOriginalbooleanfalse해석된 경로가 존재하지 않을 때, 정규화된 입력 경로를 반환하는 대신 원래 경로로 폴백할지 여부.

createResolver

기준 경로를 기준으로 하는 리졸버를 생성합니다.

createResolver에 대한 Vue School 영상을 시청하세요.

Usage

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

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

Type

function createResolver (basePath: string | URL): Resolver

Parameters

basePath: 기준으로 삼을 경로. 문자열 또는 URL일 수 있습니다.

Return Value

createResolver 함수는 다음 속성을 가진 객체를 반환합니다:

PropertyTypeDescription
resolve(path: string) => string기준 경로를 기준으로 경로를 해석하는 함수.
resolvePath(path: string, options?: ResolvePathOptions) => Promise<string>기준 경로를 기준으로 경로를 해석하며, Nuxt의 alias 및 extensions 옵션을 준수하는 함수.

Examples

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'))
      }
    })
  },
})