构建器

Nuxt Kit 提供了一组实用工具,帮助您使用构建器。这些函数允许您扩展 Vite 和 webpack 的配置。

Nuxt 有基于 Vitewebpack 的构建器。您可以使用 extendViteConfigextendWebpackConfig 函数扩展传递给它们的配置。您还可以通过 addVitePluginaddWebpackPluginaddBuildPlugin 添加额外的插件。

extendViteConfig

扩展 Vite 配置。回调函数可以被多次调用,应用于客户端和服务器构建。

用法

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

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

类型

function extendViteConfig (callback: ((config: ViteConfig) => void), options?: ExtendViteConfigOptions): void
访问 Vite 官网以获取有关配置的更多信息。

参数

callback:将被调用并传入 Vite 配置对象的回调函数。

options:传递给回调函数的选项对象。该对象可以包含以下属性:

属性类型必须描述
devbooleanfalse如果设置为 true,回调函数将在开发模式构建时被调用。
buildbooleanfalse如果设置为 true,回调函数将在生产模式构建时被调用。
serverbooleanfalse如果设置为 true,回调函数将在构建服务器包时被调用。
clientbooleanfalse如果设置为 true,回调函数将在构建客户端包时被调用。
prependbooleanfalse如果设置为 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:传递给回调函数的选项对象。该对象可以包含以下属性:

属性类型必须描述
devbooleanfalse如果设置为 true,回调函数将在开发模式构建时被调用。
buildbooleanfalse如果设置为 true,回调函数将在生产模式构建时被调用。
serverbooleanfalse如果设置为 true,回调函数将在构建服务器包时被调用。
clientbooleanfalse如果设置为 true,回调函数将在构建客户端包时被调用。
prependbooleanfalse如果设置为 true,回调函数将使用 unshift() 被添加至数组头部,而非使用 push() 添加至数组尾部。

addVitePlugin

向配置追加 Vite 插件。

用法

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

类型

function addVitePlugin (pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]), options?: ExtendViteConfigOptions): void
有关 Vite 插件的更多信息,请参阅 Vite 官网。您也可以访问 此仓库 查找符合您需求的插件。

参数

pluginOrGetter:一个 Vite 插件实例或数组。如果提供的是函数,则该函数必须返回一个 Vite 插件实例或数组。

options:传递给回调函数的选项对象。该对象可以包含以下属性:

属性类型必须描述
devbooleanfalse如果设置为 true,回调函数将在开发模式构建时被调用。
buildbooleanfalse如果设置为 true,回调函数将在生产模式构建时被调用。
serverbooleanfalse如果设置为 true,回调函数将在构建服务器包时被调用。
clientbooleanfalse如果设置为 true,回调函数将在构建客户端包时被调用。
prependbooleanfalse如果设置为 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 官网。您也可以访问 此集合 查找符合您需求的插件。

参数

pluginOrGetter:一个 webpack 插件实例或数组。如果提供的是函数,则该函数必须返回一个 webpack 插件实例或数组。

options:传递给回调函数的选项对象。该对象可以包含以下属性:

属性类型必须描述
devbooleanfalse如果设置为 true,回调函数将在开发模式构建时被调用。
buildbooleanfalse如果设置为 true,回调函数将在生产模式构建时被调用。
serverbooleanfalse如果设置为 true,回调函数将在构建服务器包时被调用。
clientbooleanfalse如果设置为 true,回调函数将在构建客户端包时被调用。
prependbooleanfalse如果设置为 true,回调函数将使用 unshift() 被添加至数组头部,而非使用 push() 添加至数组尾部。

addBuildPlugin

不依赖于构建器的 addVitePluginaddWebpackPlugin 版本。如果存在,它将同时向 Vite 和 webpack 配置添加插件。

类型

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

参数

pluginFactory:一个工厂函数,返回一个对象,该对象包含 vite 和/或 webpack 属性。这些属性必须是返回单个或数组形式 Vite 插件实例和/或 webpack 插件实例的函数。

options:传递给回调函数的选项对象。该对象可以包含以下属性:

属性类型必须描述
devbooleanfalse如果设置为 true,回调函数将在开发模式构建时被调用。
buildbooleanfalse如果设置为 true,回调函数将在生产模式构建时被调用。
serverbooleanfalse如果设置为 true,回调函数将在构建服务器包时被调用。
clientbooleanfalse如果设置为 true,回调函数将在构建客户端包时被调用。
prependbooleanfalse如果设置为 true,回调函数将使用 unshift() 被添加至数组头部,而非使用 push() 添加至数组尾部。