ビルダー · Nuxt Kit

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の設定の詳細については、webpackのWebサイトをご覧ください。

パラメーター

`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に設定した場合、コールバック関数は、push()の代わりにunshift()で配列の先頭に追加されます。

例

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の設定の詳細については、ViteのWebサイトをご覧ください。

パラメーター

`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に設定した場合、コールバック関数は、push()の代わりにunshift()で配列の先頭に追加されます。

例

// 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のWebサイトをご覧ください。また、このコレクションを使用して、ニーズに合ったプラグインを見つけることもできます。

パラメーター

`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に設定した場合、コールバック関数は、push()の代わりにunshift()で配列の先頭に追加されます。

例

// 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のWebサイトをご覧ください。また、このリポジトリを使用して、ニーズに合ったプラグインを見つけることもできます。

パラメーター

`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に設定した場合、コールバック関数は、push()の代わりにunshift()で配列の先頭に追加されます。

例

// 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に設定した場合、コールバック関数は、push()の代わりにunshift()で配列の先頭に追加されます。

ロギング

Nuxt Kitは、ロギングの操作を支援する一連のユーティリティを提供します。これらの関数を使用すると、追加機能を使用してメッセージをログに記録できます。

例

Nuxt Kitユーティリティの使用例。