Builder

Исходники

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

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

`extendViteConfig`

Extends the Vite configuration. Callback function can be called multiple times, when applying to both client and server builds.

Usage

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

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

Type

// @errors: 2391
import type { UserConfig as ViteConfig } from 'vite'
import type { ExtendViteConfigOptions } from '@nuxt/kit'
// ---cut---
function extendViteConfig (callback: ((config: ViteConfig) => void), options?: ExtendViteConfigOptions): void

Checkout Vite website for more information about its configuration.

Parameters

callback: A callback function that will be called with the Vite configuration object.

options: Options to pass to the callback function. This object can have the following properties:

Property	Type	Required	Description
`dev`	`boolean`	`false`	If set to `true`, the callback function will be called when building in development mode.
`build`	`boolean`	`false`	If set to `true`, the callback function will be called when building in production mode.
`server`	`boolean`	`false`	If set to `true`, the callback function will be called when building the server bundle.
`client`	`boolean`	`false`	If set to `true`, the callback function will be called when building the client bundle.
`prepend`	`boolean`	`false`	If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`.

`extendWebpackConfig`

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

Usage

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

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

Тип

// @errors: 2391
import type { Configuration as WebpackConfig } from 'webpack'
import type { ExtendWebpackConfigOptions } from '@nuxt/kit'
// ---cut---
function extendWebpackConfig (callback: ((config: WebpackConfig) => void), options?: ExtendWebpackConfigOptions): void

Checkout webpack website for more information about its configuration.

Параметры

callback: A callback function that will be called with the webpack configuration object.

options: Options to pass to the callback function. This object can have the following properties:

Property	Type	Required	Description
`dev`	`boolean`	`false`	If set to `true`, the callback function will be called when building in development mode.
`build`	`boolean`	`false`	If set to `true`, the callback function will be called when building in production mode.
`server`	`boolean`	`false`	If set to `true`, the callback function will be called when building the server bundle.
`client`	`boolean`	`false`	If set to `true`, the callback function will be called when building the client bundle.
`prepend`	`boolean`	`false`	If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`.

`addVitePlugin`

Append Vite plugin to the config.

Usage

// @errors: 2307
// ---cut---
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))
  },
})

Тип

// @errors: 2391
import type { Plugin as VitePlugin } from 'vite'
import type { ExtendViteConfigOptions } from '@nuxt/kit'
// ---cut---
function addVitePlugin (pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]), options?: ExtendViteConfigOptions): void

See Vite website for more information about Vite plugins. You can also use this repository to find a plugin that suits your needs.

Параметры

pluginOrGetter: A Vite plugin instance or an array of Vite plugin instances. If a function is provided, it must return a Vite plugin instance or an array of Vite plugin instances.

options: Options to pass to the callback function. This object can have the following properties:

Property	Type	Required	Description
`dev`	`boolean`	`false`	If set to `true`, the callback function will be called when building in development mode.
`build`	`boolean`	`false`	If set to `true`, the callback function will be called when building in production mode.
`server`	`boolean`	`false`	If set to `true`, the callback function will be called when building the server bundle.
`client`	`boolean`	`false`	If set to `true`, the callback function will be called when building the client bundle.
`prepend`	`boolean`	`false`	If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`.

`addWebpackPlugin`

Append webpack plugin to the config.

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

Тип

// @errors: 2391
import type { WebpackPluginInstance } from 'webpack'
import type { ExtendWebpackConfigOptions } from '@nuxt/kit'
// ---cut---
function addWebpackPlugin (pluginOrGetter: WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[]), options?: ExtendWebpackConfigOptions): void

See webpack website for more information about webpack plugins. You can also use this collection to find a plugin that suits your needs.

Параметры

pluginOrGetter: A webpack plugin instance or an array of webpack plugin instances. If a function is provided, it must return a webpack plugin instance or an array of webpack plugin instances.

options: Options to pass to the callback function. This object can have the following properties:

Property	Type	Required	Description
`dev`	`boolean`	`false`	If set to `true`, the callback function will be called when building in development mode.
`build`	`boolean`	`false`	If set to `true`, the callback function will be called when building in production mode.
`server`	`boolean`	`false`	If set to `true`, the callback function will be called when building the server bundle.
`client`	`boolean`	`false`	If set to `true`, the callback function will be called when building the client bundle.
`prepend`	`boolean`	`false`	If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`.

`addBuildPlugin`

Builder-agnostic version of addVitePlugin and addWebpackPlugin. It will add the plugin to both Vite and webpack configurations if they are present.

Тип

// @errors: 2391
import type { ExtendConfigOptions } from '@nuxt/kit'
import type { Plugin as VitePlugin } from 'vite'
import type { WebpackPluginInstance } from 'webpack'
import type { RspackPluginInstance } from '@rspack/core'
interface AddBuildPluginFactory {
  vite?: () => VitePlugin | VitePlugin[]
  webpack?: () => WebpackPluginInstance | WebpackPluginInstance[]
  rspack?: () => RspackPluginInstance | RspackPluginInstance[]
}
// ---cut---
function addBuildPlugin (pluginFactory: AddBuildPluginFactory, options?: ExtendConfigOptions): void

Параметры

pluginFactory: A factory function that returns an object with vite and/or webpack properties. These properties must be functions that return a Vite plugin instance or an array of Vite plugin instances and/or a webpack plugin instance or an array of webpack plugin instances.

options: Options to pass to the callback function. This object can have the following properties:

Property	Type	Required	Description
`dev`	`boolean`	`false`	If set to `true`, the callback function will be called when building in development mode.
`build`	`boolean`	`false`	If set to `true`, the callback function will be called when building in production mode.
`server`	`boolean`	`false`	If set to `true`, the callback function will be called when building the server bundle.
`client`	`boolean`	`false`	If set to `true`, the callback function will be called when building the client bundle.
`prepend`	`boolean`	`false`	If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`.

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

Report an issue or Edit this page on GitHub

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

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

Примеры

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