Builder

Nuxt Kit 提供了一组实用程序来帮助你使用构建器。这些函数允许你扩展 webpack 和 vite 配置。

Nuxt 拥有基于 webpack 和 vite 的构建器。你可以使用 extendWebpackConfig 和 extendViteConfig 函数扩展传递给每个应用的配置。你还可以通过 addVitePlugin、addWebpackPlugin 和 addBuildPlugin 添加其他插件。

¥Nuxt have builders based on webpack and vite. You can extend the config passed to each one using extendWebpackConfig and extendViteConfig functions. You can also add additional plugins via addVitePlugin, addWebpackPlugin and addBuildPlugin.

`extendWebpackConfig`

扩展 webpack 配置。回调函数可在客户端和服务器构建时多次调用。

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

类型

¥Type

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

export interface ExtendWebpackConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}

Read more in https://webpack.js.org/configuration.

查看 webpack 网站，了解更多关于其配置的信息。

¥Checkout webpack website for more information about its configuration.

参数

¥Parameters

`callback`

类型：(config: WebpackConfig) => void

¥Type: (config: WebpackConfig) => void

必需：true

¥Required: true

将使用 webpack 配置对象调用的回调函数。

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

`options`

类型：ExtendWebpackConfigOptions

¥Type: ExtendWebpackConfigOptions

默认：{}

¥Default: {}

传递给回调函数的选项。此对象可以具有以下属性：

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

dev（可选）
类型：boolean
默认：true
如果设置为 true，则在开发模式下构建时将调用回调函数。
build（可选）
类型：boolean
默认：true
如果设置为 true，则在生产模式下构建时将调用回调函数。
server（可选）
类型：boolean
默认：true
如果设置为 true，则在构建服务器包时将调用回调函数。
client（可选）
类型：boolean
默认：true
如果设置为 true，则在构建客户端包时将调用回调函数。
prepend（可选）
类型：boolean
如果设置为 true，则回调函数将使用 unshift() 而不是 push() 添加到数组的前面。

示例

¥Examples

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

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

`extendViteConfig`

扩展 Vite 配置。回调函数可在客户端和服务器构建时多次调用。

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

类型

¥Type

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

export interface ExtendViteConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}

参数

¥Parameters

`callback`

类型：(config: ViteConfig) => void

¥Type: (config: ViteConfig) => void

必需：true

¥Required: true

将使用 Vite 配置对象调用的回调函数。

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

`options`

类型：ExtendViteConfigOptions

¥Type: ExtendViteConfigOptions

默认：{}

¥Default: {}

传递给回调函数的选项。此对象可以具有以下属性：

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

dev（可选）
类型：boolean
默认：true
如果设置为 true，则在开发模式下构建时将调用回调函数。
build（可选）
类型：boolean
默认：true
如果设置为 true，则在生产模式下构建时将调用回调函数。
server（可选）
类型：boolean
默认：true
如果设置为 true，则在构建服务器包时将调用回调函数。
client（可选）
类型：boolean
默认：true
如果设置为 true，则在构建客户端包时将调用回调函数。
prepend（可选）
类型：boolean
如果设置为 true，则回调函数将使用 unshift() 而不是 push() 添加到数组的前面。

示例

¥Examples

// https://github.com/Hrdtr/nuxt-appwrite
import { defineNuxtModule, extendViteConfig } from '@nuxt/kit'

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

`addWebpackPlugin`

将 webpack 插件附加到配置中。

¥Append webpack plugin to the config.

类型

¥Type

function addWebpackPlugin (pluginOrGetter: PluginOrGetter, options?: ExtendWebpackConfigOptions): void

type PluginOrGetter = WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[])

interface ExtendWebpackConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}

有关 webpack 插件的更多信息，请参阅 webpack website。你也可以使用 this collection 来查找适合你需求的插件。

参数

¥Parameters

`pluginOrGetter`

类型：PluginOrGetter

¥Type: PluginOrGetter

必需：true

¥Required: true

一个 Webpack 插件实例或一个 Webpack 插件实例数组。如果提供了函数，它必须返回一个 Webpack 插件实例或一个 Webpack 插件实例数组。

¥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`

类型：ExtendWebpackConfigOptions

¥Type: ExtendWebpackConfigOptions

默认：{}

¥Default: {}

传递给回调函数的选项。此对象可以具有以下属性：

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

dev（可选）
类型：boolean
默认：true
如果设置为 true，则在开发模式下构建时将调用回调函数。
build（可选）
类型：boolean
默认：true
如果设置为 true，则在生产模式下构建时将调用回调函数。
server（可选）
类型：boolean
默认：true
如果设置为 true，则在构建服务器包时将调用回调函数。
client（可选）
类型：boolean
默认：true
如果设置为 true，则在构建客户端包时将调用回调函数。
prepend（可选）
类型：boolean
如果设置为 true，则回调函数将使用 unshift() 而不是 push() 添加到数组的前面。

示例

¥Examples

// https://github.com/nuxt-modules/eslint
import EslintWebpackPlugin from 'eslint-webpack-plugin'
import { defineNuxtModule, addWebpackPlugin } 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 })
  }
})

`addVitePlugin`

将 Vite 插件附加到配置中。

¥Append Vite plugin to the config.

类型

¥Type

function addVitePlugin (pluginOrGetter: PluginOrGetter, options?: ExtendViteConfigOptions): void

type PluginOrGetter = VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[])

interface ExtendViteConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}

有关 Vite 插件的更多信息，请参阅 Vite website。你也可以使用 this repository 来查找适合你需求的插件。

参数

¥Parameters

`pluginOrGetter`

类型：PluginOrGetter

¥Type: PluginOrGetter

必需：true

¥Required: true

一个 Vite 插件实例或一个 Vite 插件实例数组。如果提供了函数，它必须返回一个 Vite 插件实例或一个 Vite 插件实例数组。

¥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`

类型：ExtendViteConfigOptions

¥Type: ExtendViteConfigOptions

默认：{}

¥Default: {}

传递给回调函数的选项。此对象可以具有以下属性：

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

dev（可选）
类型：boolean
默认：true
如果设置为 true，则在开发模式下构建时将调用回调函数。
build（可选）
类型：boolean
默认：true
如果设置为 true，则在生产模式下构建时将调用回调函数。
server（可选）
类型：boolean
默认：true
如果设置为 true，则在构建服务器包时将调用回调函数。
client（可选）
类型：boolean
默认：true
如果设置为 true，则在构建客户端包时将调用回调函数。
prepend（可选）
类型：boolean
如果设置为 true，则回调函数将使用 unshift() 而不是 push() 添加到数组的前面。

示例

¥Examples

// https://github.com/yisibell/nuxt-svg-icons
import { defineNuxtModule, addVitePlugin } 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))
  },
})

`addBuildPlugin`

与构建器无关的 addWebpackPlugin 和 addVitePlugin 版本。如果存在 webpack 和 vite 配置，它会将插件添加到它们中。

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

类型

¥Type

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

interface AddBuildPluginFactory {
  vite?: () => VitePlugin | VitePlugin[]
  webpack?: () => WebpackPluginInstance | WebpackPluginInstance[]
}

interface ExtendConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}

参数

¥Parameters

`pluginFactory`

类型：AddBuildPluginFactory

¥Type: AddBuildPluginFactory

必需：true

¥Required: true

返回具有 vite 和/或 webpack 属性的对象的工厂函数。这些属性必须是返回 Vite 插件实例或 Vite 插件实例数组和/或 webpack 插件实例或 webpack 插件实例数组的函数。

¥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`

类型：ExtendConfigOptions

¥Type: ExtendConfigOptions

默认：{}

¥Default: {}

传递给回调函数的选项。此对象可以具有以下属性：

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

dev（可选）
类型：boolean
默认：true
如果设置为 true，则在开发模式下构建时将调用回调函数。
build（可选）
类型：boolean
默认：true
如果设置为 true，则在生产模式下构建时将调用回调函数。
server（可选）
类型：boolean
默认：true
如果设置为 true，则在构建服务器包时将调用回调函数。
client（可选）
类型：boolean
默认：true
如果设置为 true，则在构建客户端包时将调用回调函数。
prepend（可选）
类型：boolean
如果设置为 true，则回调函数将使用 unshift() 而不是 push() 添加到数组的前面。

日志记录

Nuxt Kit 提供了一组实用程序来帮助你使用日志记录。这些函数允许你使用额外的功能记录消息。

示例

Nuxt Kit 实用程序的使用示例。