Builder

Исходники

Nuxt Kit предоставляет набор утилит, которые помогут вам работать со сборщиком. Эти функции позволяют вам расширять конфигурации Vite и webpack.

В Nuxt есть сборщики на основе Vite и webpack. Вы можете расширить конфигурацию, передаваемую каждому из них, используя функции extendViteConfig и extendWebpackConfig. Вы также можете добавлять дополнительные плагины с помощью addVitePlugin, addWebpackPlugin и addBuildPlugin.

`extendViteConfig`

Расширяет конфигурацию Vite. Колбэк может вызываться несколько раз (для клиентской и серверной сборок).

Хук устарел. Рекомендуется использовать плагин Vite с хуком config или, для конфигурации по окружениям, хук applyToEnvironment.

Использование

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.

Тип

function extendViteConfig (callback
: ((config
: ViteConfig
) => void), options
?: ExtendViteConfigOptions
): void
Function implementation is missing or not immediately following the declaration.

Подробнее о конфигурации Vite на официальном сайте.

Параметры

callback: функция, вызываемая с объектом конфигурации Vite.

options:

Свойство	Тип	Обязательный	Описание
`dev`	`boolean`	нет	`true` — вызывать при сборке в режиме разработки.
`build`	`boolean`	нет	`true` — вызывать при production-сборке.
`server`	`boolean`	нет	`true` — при сборке серверного бандла. Устарело в Nuxt 5+. Используйте `addVitePlugin()` с `applyToEnvironment()`.
`client`	`boolean`	нет	`true` — при сборке клиентского бандла. Устарело в Nuxt 5+. Используйте `addVitePlugin()` с `applyToEnvironment()`.
`prepend`	`boolean`	нет	`true` — добавить колбэк в начало списка (`unshift` вместо `push`).

`extendWebpackConfig`

Расширяет конфигурацию webpack. Коллбэк-функция может быть вызвана несколько раз, для применения ее как к клиентским, так и к серверным сборкам.

Использование

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

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

Тип

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

Подробнее о конфигурации webpack на официальном сайте.

Параметры

callback: функция, вызываемая с объектом конфигурации webpack.

options: опции, передаваемые в колбэк. Объект может содержать:

Свойство	Тип	Обязательный	Описание
`dev`	`boolean`	нет	`true` — колбэк вызывается при сборке в режиме разработки.
`build`	`boolean`	нет	`true` — колбэк вызывается при production-сборке.
`server`	`boolean`	нет	`true` — колбэк вызывается при сборке серверного бандла.
`client`	`boolean`	нет	`true` — колбэк вызывается при сборке клиентского бандла.
`prepend`	`boolean`	нет	`true` — колбэк добавляется в начало массива через `unshift()` вместо `push()`.

`addVitePlugin`

Добавляет плагин Vite в конфигурацию.

В Nuxt 5+ у плагинов, зарегистрированных с server: false или client: false, не вызываются хуки config и configResolved. Используйте метод applyToEnvironment() для плагинов по окружениям.

Использование

import { addVitePlugin
, defineNuxtModule
 } from '@nuxt/kit'
import { svg4VuePlugin
 } from 'vite-plugin-svg4vue'
Cannot find module 'vite-plugin-svg4vue' or its corresponding type declarations.

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

    // или — плагин только для одного окружения
    addVitePlugin
(() => ({
      name
: 'my-client-plugin',
      applyToEnvironment
 (environment
) {
        return environment
.name
 === 'client'
      },
      // ... rest of your client-only plugin
    }))
  },
})

Тип

function addVitePlugin (pluginOrGetter
: VitePlugin
 | VitePlugin
[] | (() => VitePlugin
 | VitePlugin
[]), options
?: ExtendViteConfigOptions
): void
Function implementation is missing or not immediately following the declaration.

Подробнее о плагинах Vite: Vite website. Подборка плагинов: awesome-vite.

Параметры

pluginOrGetter: экземпляр плагина Vite, массив экземпляров или функция, возвращающая их (можно async/Promise — для ленивой загрузки):

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

export default defineNuxtModule
({
  setup
 () {
    // Ленивая загрузка — импорт при сборке
    addVitePlugin
(() => import('my-vite-plugin').then
(r
 => r
.default()))
Cannot find module 'my-vite-plugin' or its corresponding type declarations.
  },
})

options: опции для колбэка. Объект может содержать:

Свойство	Тип	Обязательный	Описание
`dev`	`boolean`	нет	`true` — колбэк вызывается при сборке в режиме разработки.
`build`	`boolean`	нет	`true` — колбэк вызывается при production-сборке.
`server`	`boolean`	нет	`true` — колбэк для серверного бандла. Устарело в Nuxt 5+. Используйте `applyToEnvironment()`.
`client`	`boolean`	нет	`true` — колбэк для клиентского бандла. Устарело в Nuxt 5+. Используйте `applyToEnvironment()**.
`prepend`	`boolean`	нет	`true` — колбэк добавляется в начало массива через `unshift()` вместо `push()`.

`addWebpackPlugin`

Добавляет плагин webpack в конфигурацию.

Использование

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

Тип

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

Подробнее о плагинах webpack: webpack website. Подборка: awesome-webpack.

Параметры

pluginOrGetter: экземпляр плагина webpack, массив экземпляров или функция, возвращающая их (можно async/Promise для ленивой загрузки).

Свойство	Тип	Обязательный	Описание
`dev`	`boolean`	нет	`true` — колбэк вызывается при сборке в режиме разработки.
`build`	`boolean`	нет	`true` — колбэк вызывается при production-сборке.
`server`	`boolean`	нет	`true` — колбэк вызывается при сборке серверного бандла.
`client`	`boolean`	нет	`true` — колбэк вызывается при сборке клиентского бандла.
`prepend`	`boolean`	нет	`true` — колбэк добавляется в начало массива через `unshift()` вместо `push()`.

`addBuildPlugin`

Универсальная версия addVitePlugin и addWebpackPlugin: добавляет плагин в конфигурации Vite и webpack, если они используются.

Тип

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

Параметры

pluginFactory: фабрика — объект с методами vite и/или webpack (и при необходимости rspack). Каждый метод возвращает экземпляр плагина или массив экземпляров для соответствующего билдера.

Свойство	Тип	Обязательный	Описание
`dev`	`boolean`	нет	`true` — колбэк вызывается при сборке в режиме разработки.
`build`	`boolean`	нет	`true` — колбэк вызывается при production-сборке.
`server`	`boolean`	нет	`true` — колбэк вызывается при сборке серверного бандла.
`client`	`boolean`	нет	`true` — колбэк вызывается при сборке клиентского бандла.
`prepend`	`boolean`	нет	`true` — колбэк добавляется в начало массива через `unshift()` вместо `push()`.

Был ли материал полезен?

Сообщить об ошибке или Редактировать на GitHub

Logging (Ведение журнала)

Nuxt Kit предоставляет набор утилит, которые помогают вам работать с ведением журнала. Эти функции позволяют вам записывать сообщения с дополнительными функциями..

Примеры

Примеры использования утилит Nuxt Kit.