Nuxt3 中文课程《实战全栈开发简书》限时优惠

Builder

Nuxt Kit 提供了一系列工具,帮助你使用构建器。这些函数允许你扩展 webpack 和 vite 的配置。

Nuxt 使用基于 webpackvite 的构建器。你可以使用 extendWebpackConfigextendViteConfig 函数来扩展每个构建器的配置。你还可以通过 addVitePluginaddWebpackPluginaddBuildPlugin 来添加额外的插件。

extendWebpackConfig

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

类型

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

export interface ExtendWebpackConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}
查看 webpack 网站获取更多关于其配置的信息。

参数

callback

类型: (config: WebpackConfig) => void

必填: true

一个回调函数,将使用 webpack 配置对象调用。

options

类型: ExtendWebpackConfigOptions

默认值: {}

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

  • dev (可选)
    类型: boolean
    默认值: true
    如果设置为 true,在开发模式下构建时将调用回调函数。
  • build (可选)
    类型: boolean
    默认值: true
    如果设置为 true,在生产模式下构建时将调用回调函数。
  • server (可选)
    类型: boolean
    默认值: true
    如果设置为 true,构建服务器包时将调用回调函数。
  • client (可选)
    类型: boolean
    默认值: true
    如果设置为 true,构建客户端包时将调用回调函数。
  • prepend (可选)
    类型: boolean
    如果设置为 true,将使用 unshift() 方法将回调函数插入到数组的开头,而不是使用 push() 方法。

示例

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

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

extendViteConfig

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

类型

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

export interface ExtendViteConfigOptions {
  dev?: boolean
  build?: boolean
  server?: boolean
  client?: boolean
  prepend?: boolean
}
查看 Vite 网站获取更多关于其配置的信息。

参数

callback

类型: (config: ViteConfig) => void

必填: true

一个回调函数,将使用 Vite 配置对象调用。

options

类型: ExtendViteConfigOptions

默认值: {}

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

  • dev (可选)
    类型: boolean
    默认值: true
    如果设置为 true,在开发模式下构建时将调用回调函数。
  • build (可选)
    类型: boolean
    默认值: true
    如果设置为 true,在生产模式下构建时将调用回调函数。
  • server (可选)
    类型: boolean
    默认值: true
    如果设置为 true,构建服务器包时将调用回调函数。
  • client (可选)
    类型: boolean
    默认值: true
    如果设置为 true,构建客户端包时将调用回调函数。
  • prepend (可选)
    类型: boolean
    如果设置为 true,将使用 unshift() 方法将回调函数插入到数组的开头,而不是使用 push() 方法。

示例

// 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 插件。

类型

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 插件的更多信息。你也可以使用 这个集合 来找到适合你需求的插件。

参数

pluginOrGetter

类型: PluginOrGetter

必填: true

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

options

类型: ExtendWebpackConfigOptions

默认值: {}

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

  • dev (可选)
    类型: boolean
    默认值: true
    如果设置为 true,在开发模式下构建时将调用回调函数。
  • build (可选)
    类型: boolean
    默认值: true
    如果设置为 true,在生产模式下构建时将调用回调函数。
  • server (可选)
    类型: boolean
    默认值: true
    如果设置为 true,构建服务器包时将调用回调函数。
  • client (可选)
    类型: boolean
    默认值: true
    如果设置为 true,构建客户端包时将调用回调函数。
  • prepend (可选)
    类型: boolean
    如果设置为 true,将使用 unshift() 方法将回调函数插入到数组的开头,而不是使用 push() 方法。

示例

// 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 插件。

类型

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 插件的更多信息。你也可以使用 这个仓库 来找到适合你需求的插件。

参数

pluginOrGetter

类型: PluginOrGetter

必填: true

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

options

类型: ExtendViteConfigOptions

默认值: {}

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

  • dev (可选)
    类型: boolean
    默认值: true
    如果设置为 true,在开发模式下构建时将调用回调函数。
  • build (可选)
    类型: boolean
    默认值: true
    如果设置为 true,在生产模式下构建时将调用回调函数。
  • server (可选)
    类型: boolean
    默认值: true
    如果设置为 true,构建服务器包时将调用回调函数。
  • client (可选)
    类型: boolean
    默认值: true
    如果设置为 true,构建客户端包时将调用回调函数。
  • prepend (可选)
    类型: boolean
    如果设置为 true,将使用 unshift() 方法将回调函数插入到数组的开头,而不是使用 push() 方法。

示例

// 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

addWebpackPluginaddVitePlugin 的构建器无关版本。如果 webpack 和 vite 配置存在,则会将插件添加到两者中。

类型

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
}

参数

pluginFactory

类型: AddBuildPluginFactory

必填: true

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

options

类型: ExtendConfigOptions

默认值: {}

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

  • dev (可选)
    类型: boolean
    默认值: true
    如果设置为 true,在开发模式下构建时将调用回调函数。
  • build (可选)
    类型: boolean
    默认值: true
    如果设置为 true,在生产模式下构建时将调用回调函数。
  • server (可选)
    类型: boolean
    默认值: true
    如果设置为 true,构建服务器包时将调用回调函数。
  • client (可选)
    类型: boolean
    默认值: true
    如果设置为 true,构建客户端包时将调用回调函数。
  • prepend (可选)
    类型: boolean
    如果设置为 true,将使用 unshift() 方法将回调函数插入到数组的开头,而不是使用 push() 方法。