경로 해석

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

때때로 경로를 해석해야 할 때가 있습니다: 현재 모듈을 기준으로, 이름이나 확장자가 불분명한 경우입니다. 예를 들어, 모듈과 동일한 디렉터리에 위치한 플러그인을 추가하고 싶을 수 있습니다. 이러한 경우를 처리하기 위해 nuxt는 경로를 해석하는 유틸리티 집합을 제공합니다. resolvePath와 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 is ${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`	해석된 경로가 존재하지 않을 때 정규화된 입력 경로 대신 원래 경로로 대체할지 여부입니다.

예시

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`

기준 경로를 기준으로 해석기를 생성합니다.

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

사용법

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

export default defineNuxtModule({
  async 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'))
      }
    })
  },
})