빌더

Nuxt Kit은 빌더 작업을 도와주는 유틸리티 세트를 제공합니다. 이 함수들을 사용하면 Vite 및 webpack 설정을 확장할 수 있습니다.

Nuxt에는 Vite와 webpack을 기반으로 한 빌더가 있습니다. 각각에 전달되는 설정은 extendViteConfig 및 extendWebpackConfig 함수를 사용해 확장할 수 있습니다. 또한 addVitePlugin, addWebpackPlugin, addBuildPlugin을 통해 추가 플러그인을 등록할 수도 있습니다.

`extendViteConfig`

Vite 설정을 확장합니다. 콜백 함수는 클라이언트와 서버 빌드 모두에 적용될 때 여러 번 호출될 수 있습니다.

이 훅은 이제 사용이 권장되지 않으며, 대신 config 훅을 가진 Vite 플러그인을 사용하거나, 환경별 설정의 경우 applyToEnvironment 훅을 사용할 것을 권장합니다.

Usage

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

export default defineNuxtModule({
  setup () {
    extendViteConfig((config) => {
      config.optimizeDeps ||= {}
      config.optimizeDeps.include ||= []
      config.optimizeDeps.include.push('cross-fetch')
    })
  },
})

Nuxt 5+에서 환경별 설정을 위해서는 대신 addVitePlugin()을 사용하세요:

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

export default defineNuxtModule({
  setup () {
    // 전역 설정용 (모든 환경에 영향을 줌)
    addVitePlugin(() => ({
      name: 'my-global-plugin',
      config (config) {
        // 이 코드는 환경 설정 전에 실행됩니다
        config.optimizeDeps ||= {}
        config.optimizeDeps.include ||= []
        config.optimizeDeps.include.push('cross-fetch')
      },
    }))

    // 환경별 설정용
    addVitePlugin(() => ({
      name: 'my-client-plugin',
      applyToEnvironment (environment) {
        return environment.name === 'client'
      },
      configEnvironment (name, config) {
        // 이 코드는 클라이언트 환경에만 영향을 줍니다
        config.optimizeDeps ||= {}
        config.optimizeDeps.include ||= []
        config.optimizeDeps.include.push('client-only-package')
      },
    }))
  },
})

중요:config 훅은 applyToEnvironment보다 먼저 실행되며 전역 설정을 수정합니다. 환경별 설정 변경에는 configEnvironment를 사용하세요.

Type

function extendViteConfig (callback: ((config: ViteConfig) => void), options?: ExtendViteConfigOptions): void

Vite 설정에 대한 더 많은 정보는 Vite 웹사이트를 참고하세요.

Parameters

callback: Vite 설정 객체와 함께 호출될 콜백 함수입니다.

options: 콜백 함수에 전달할 옵션입니다. 이 객체는 다음 속성을 가질 수 있습니다:

Property	Type	Required	Description
`dev`	`boolean`	`false`	`true`로 설정하면 개발 모드에서 빌드할 때 콜백 함수가 호출됩니다.
`build`	`boolean`	`false`	`true`로 설정하면 프로덕션 모드에서 빌드할 때 콜백 함수가 호출됩니다.
`server`	`boolean`	`false`	`true`로 설정하면 서버 번들을 빌드할 때 콜백 함수가 호출됩니다. Nuxt 5+에서 사용이 권장되지 않습니다. 대신 `applyToEnvironment()`와 함께 `addVitePlugin()`을 사용하세요.
`client`	`boolean`	`false`	`true`로 설정하면 클라이언트 번들을 빌드할 때 콜백 함수가 호출됩니다. Nuxt 5+에서 사용이 권장되지 않습니다. 대신 `applyToEnvironment()`와 함께 `addVitePlugin()`을 사용하세요.
`prepend`	`boolean`	`false`	`true`로 설정하면 콜백 함수가 `push()` 대신 `unshift()`로 배열의 앞에 추가됩니다.

`extendWebpackConfig`

webpack 설정을 확장합니다. 콜백 함수는 클라이언트와 서버 빌드 모두에 적용될 때 여러 번 호출될 수 있습니다.

Usage

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

export default defineNuxtModule({
  setup () {
    extendWebpackConfig((config) => {
      config.module!.rules!.push({
        test: /\.txt$/,
        use: 'raw-loader',
      })
    })
  },
})

Type

function extendWebpackConfig (callback: ((config: WebpackConfig) => void), options?: ExtendWebpackConfigOptions): void

webpack 설정에 대한 더 많은 정보는 webpack 웹사이트를 참고하세요.

Parameters

callback: webpack 설정 객체와 함께 호출될 콜백 함수입니다.

options: 콜백 함수에 전달할 옵션입니다. 이 객체는 다음 속성을 가질 수 있습니다:

Property	Type	Required	Description
`dev`	`boolean`	`false`	`true`로 설정하면 개발 모드에서 빌드할 때 콜백 함수가 호출됩니다.
`build`	`boolean`	`false`	`true`로 설정하면 프로덕션 모드에서 빌드할 때 콜백 함수가 호출됩니다.
`server`	`boolean`	`false`	`true`로 설정하면 서버 번들을 빌드할 때 콜백 함수가 호출됩니다.
`client`	`boolean`	`false`	`true`로 설정하면 클라이언트 번들을 빌드할 때 콜백 함수가 호출됩니다.
`prepend`	`boolean`	`false`	`true`로 설정하면 콜백 함수가 `push()` 대신 `unshift()`로 배열의 앞에 추가됩니다.

`addVitePlugin`

Vite 플러그인을 설정에 추가합니다.

Nuxt 5+에서는 server: false 또는 client: false 옵션으로 등록된 플러그인의 config 또는 configResolved 훅이 호출되지 않습니다. 대신 환경별 플러그인에는 applyToEnvironment() 메서드를 사용하세요.

Usage

import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
import { svg4VuePlugin } from 'vite-plugin-svg4vue'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-svg-icons',
    configKey: 'nuxtSvgIcons',
  },
  defaults: {
    svg4vue: {
      assetsDirName: 'assets/icons',
    },
  },
  setup (options) {
    addVitePlugin(svg4VuePlugin(options.svg4vue))

    // 또는, 특정 환경에만 vite 플러그인을 추가하려면
    addVitePlugin(() => ({
      name: 'my-client-plugin',
      applyToEnvironment (environment) {
        return environment.name === 'client'
      },
      // ... 나머지 클라이언트 전용 플러그인
    }))
  },
})

Type

function addVitePlugin (pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]), options?: ExtendViteConfigOptions): void

Vite 플러그인에 대한 더 많은 정보는 Vite 웹사이트를 참고하세요. 또한 이 저장소를 사용해 필요에 맞는 플러그인을 찾을 수 있습니다.

Parameters

pluginOrGetter: Vite 플러그인 인스턴스 또는 Vite 플러그인 인스턴스 배열입니다. 함수가 제공된 경우, Vite 플러그인 인스턴스 또는 그 배열을 반환해야 합니다.

options: 콜백 함수에 전달할 옵션입니다. 이 객체는 다음 속성을 가질 수 있습니다:

Property	Type	Required	Description
`dev`	`boolean`	`false`	`true`로 설정하면 개발 모드에서 빌드할 때 콜백 함수가 호출됩니다.
`build`	`boolean`	`false`	`true`로 설정하면 프로덕션 모드에서 빌드할 때 콜백 함수가 호출됩니다.
`server`	`boolean`	`false`	`true`로 설정하면 서버 번들을 빌드할 때 콜백 함수가 호출됩니다. Nuxt 5+에서 사용이 권장되지 않습니다. 대신 `applyToEnvironment()`를 사용하세요.
`client`	`boolean`	`false`	`true`로 설정하면 클라이언트 번들을 빌드할 때 콜백 함수가 호출됩니다. Nuxt 5+에서 사용이 권장되지 않습니다. 대신 `applyToEnvironment()`를 사용하세요.
`prepend`	`boolean`	`false`	`true`로 설정하면 콜백 함수가 `push()` 대신 `unshift()`로 배열의 앞에 추가됩니다.

`addWebpackPlugin`

webpack 플러그인을 설정에 추가합니다.

Usage

import EslintWebpackPlugin from 'eslint-webpack-plugin'
import { addWebpackPlugin, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-eslint',
    configKey: 'eslint',
  },
  defaults: nuxt => ({
    include: [`${nuxt.options.srcDir}/**/*.{js,jsx,ts,tsx,vue}`],
    lintOnStart: true,
  }),
  setup (options, nuxt) {
    const webpackOptions = {
      ...options,
      context: nuxt.options.srcDir,
      files: options.include,
      lintDirtyModulesOnly: !options.lintOnStart,
    }
    addWebpackPlugin(new EslintWebpackPlugin(webpackOptions), { server: false })
  },
})

Type

function addWebpackPlugin (pluginOrGetter: WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[]), options?: ExtendWebpackConfigOptions): void

webpack 플러그인에 대한 더 많은 정보는 webpack 웹사이트를 참고하세요. 또한 이 컬렉션을 사용해 필요에 맞는 플러그인을 찾을 수 있습니다.

Parameters

pluginOrGetter: webpack 플러그인 인스턴스 또는 webpack 플러그인 인스턴스 배열입니다. 함수가 제공된 경우, webpack 플러그인 인스턴스 또는 그 배열을 반환해야 합니다.

options: 콜백 함수에 전달할 옵션입니다. 이 객체는 다음 속성을 가질 수 있습니다:

Property	Type	Required	Description
`dev`	`boolean`	`false`	`true`로 설정하면 개발 모드에서 빌드할 때 콜백 함수가 호출됩니다.
`build`	`boolean`	`false`	`true`로 설정하면 프로덕션 모드에서 빌드할 때 콜백 함수가 호출됩니다.
`server`	`boolean`	`false`	`true`로 설정하면 서버 번들을 빌드할 때 콜백 함수가 호출됩니다.
`client`	`boolean`	`false`	`true`로 설정하면 클라이언트 번들을 빌드할 때 콜백 함수가 호출됩니다.
`prepend`	`boolean`	`false`	`true`로 설정하면 콜백 함수가 `push()` 대신 `unshift()`로 배열의 앞에 추가됩니다.

`addBuildPlugin`

addVitePlugin과 addWebpackPlugin의 빌더에 구애받지 않는 버전입니다. Vite와 webpack 설정이 모두 존재하는 경우 둘 다에 플러그인을 추가합니다.

Type

function addBuildPlugin (pluginFactory: AddBuildPluginFactory, options?: ExtendConfigOptions): void

Parameters

pluginFactory: vite 및/또는 webpack 속성을 가진 객체를 반환하는 팩토리 함수입니다. 이 속성들은 Vite 플러그인 인스턴스 또는 그 배열, 그리고/또는 webpack 플러그인 인스턴스 또는 그 배열을 반환하는 함수여야 합니다.

options: 콜백 함수에 전달할 옵션입니다. 이 객체는 다음 속성을 가질 수 있습니다:

Property	Type	Required	Description
`dev`	`boolean`	`false`	`true`로 설정하면 개발 모드에서 빌드할 때 콜백 함수가 호출됩니다.
`build`	`boolean`	`false`	`true`로 설정하면 프로덕션 모드에서 빌드할 때 콜백 함수가 호출됩니다.
`server`	`boolean`	`false`	`true`로 설정하면 서버 번들을 빌드할 때 콜백 함수가 호출됩니다.
`client`	`boolean`	`false`	`true`로 설정하면 클라이언트 번들을 빌드할 때 콜백 함수가 호출됩니다.
`prepend`	`boolean`	`false`	`true`로 설정하면 콜백 함수가 `push()` 대신 `unshift()`로 배열의 앞에 추가됩니다.

Was this helpful?

Report an issue or Edit this page on GitHub

로깅

Nuxt Kit은 로깅 작업을 도와주는 유틸리티 세트를 제공합니다. 이 함수들을 사용하면 추가 기능과 함께 메시지를 기록할 수 있습니다.

예시

Nuxt Kit 유틸리티 사용 예시입니다.