Builder · Nuxt 工具套件

Nuxt 具有基於 webpack 和 vite 的建構器。您可以使用 extendWebpackConfig 和 extendViteConfig 函式來擴充傳遞給它們的設定。您也可以透過 addVitePlugin、addWebpackPlugin 和 addBuildPlugin 來新增額外的外掛程式。

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

與建構器無關的版本，相當於 addWebpackPlugin 和 addVitePlugin。如果 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() 被前置到陣列中。

記錄

Nuxt Kit 提供了一系列的工具程式，以協助您使用記錄功能。這些函式讓您可以記錄帶有額外功能的訊息。

範例

Nuxt Kit 工具程式的使用範例。