構建器

原始檔
Nuxt Kit 提供了一套實用工具，幫助您使用構建器。這些函式允許您擴充套件 Vite 和 webpack 配置。

Nuxt 擁有基於Vite等等webpack的構建器。您可以使用 extendViteConfig 和 extendWebpackConfig 函式來擴充套件傳遞給每個構建器的配置。您還可以透過 addVitePlugin、addWebpackPlugin 和 addBuildPlugin 新增額外的外掛。

extendViteConfig

擴充套件 Vite 配置。當應用於客戶端和伺服器構建時，回撥函式可以被多次呼叫。

此鉤子現已棄用，我們建議改用帶有 config 鉤子的 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 配置的更多資訊，請檢視 Vite 網站。

引數

callback: 一個回撥函式，將以 Vite 配置物件作為引數呼叫。

options: 傳遞給回撥函式的選項。此物件可以具有以下屬性

屬性型別必需描述
開發booleanfalse如果設定為 true，則在開發模式下構建時將呼叫回撥函式。
buildbooleanfalse如果設定為 true，則在生產模式下構建時將呼叫回撥函式。
伺服器booleanfalse如果設定為 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: 傳遞給回撥函式的選項。此物件可以具有以下屬性

屬性型別必需描述
開發booleanfalse如果設定為 true，則在開發模式下構建時將呼叫回撥函式。
buildbooleanfalse如果設定為 true，則在生產模式下構建時將呼叫回撥函式。
伺服器booleanfalse如果設定為 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 外掛例項陣列。如果提供的是函式，則它必須返回一個 Vite 外掛例項或一個 Vite 外掛例項陣列。

options: 傳遞給回撥函式的選項。此物件可以具有以下屬性

屬性型別必需描述
開發booleanfalse如果設定為 true，則在開發模式下構建時將呼叫回撥函式。
buildbooleanfalse如果設定為 true，則在生產模式下構建時將呼叫回撥函式。
伺服器booleanfalse如果設定為 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 外掛例項陣列。如果提供的是函式，則它必須返回一個 webpack 外掛例項或一個 webpack 外掛例項陣列。

options: 傳遞給回撥函式的選項。此物件可以具有以下屬性

屬性型別必需描述
開發booleanfalse如果設定為 true，則在開發模式下構建時將呼叫回撥函式。
buildbooleanfalse如果設定為 true，則在生產模式下構建時將呼叫回撥函式。
伺服器booleanfalse如果設定為 true，則在構建伺服器包時將呼叫回撥函式。
clientbooleanfalse如果設定為 true，則在構建客戶端包時將呼叫回撥函式。
prependbooleanfalse如果設定為 true，則回撥函式將使用 unshift() 而不是 push() 新增到陣列的開頭。

addBuildPlugin

與構建器無關的 addVitePlugin 和 addWebpackPlugin 版本。如果存在，它會將外掛新增到 Vite 和 webpack 配置中。

型別

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

引數

pluginFactory: 一個工廠函式，返回一個包含 vite 和/或 webpack 屬性的物件。這些屬性必須是函式，返回一個 Vite 外掛例項或一個 Vite 外掛例項陣列，和/或一個 webpack 外掛例項或一個 webpack 外掛例項陣列。

options: 傳遞給回撥函式的選項。此物件可以具有以下屬性

屬性型別必需描述
開發booleanfalse如果設定為 true，則在開發模式下構建時將呼叫回撥函式。
buildbooleanfalse如果設定為 true，則在生產模式下構建時將呼叫回撥函式。
伺服器booleanfalse如果設定為 true，則在構建伺服器包時將呼叫回撥函式。
clientbooleanfalse如果設定為 true，則在構建客戶端包時將呼叫回撥函式。
prependbooleanfalse如果設定為 true，則回撥函式將使用 unshift() 而不是 push() 新增到陣列的開頭。