Using Plugins #

Wite can be extended using plugins, which are based on Rollup's well-designed plugin interface with a few extra Wite-specific options. This means that Wite users can rely on the mature ecosystem of Rollup plugins, while also being able to extend the dev server and SSR functionality as needed.

Adding a Plugin #

To use a plugin, it needs to be added to the devDependencies of the project and included in the plugins array in the wite.config.js config file. For example, to provide support for legacy browsers, the official @witejs/plugin-legacy can be used:

$ npm add -D @witejs/plugin-legacy

// wite.config.js
import legacy from '@witejs/plugin-legacy'
import { defineConfig } from 'wite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

plugins also accept presets including several plugins as a single element. This is useful for complex features (like framework integration) that are implemented using several plugins. The array will be flattened internally.

Falsy plugins will be ignored, which can be used to easily activate or deactivate plugins.

Finding Plugins #

You can also find plugins that follow the recommended conventions using a npm search for wite-plugin for Wite plugins or a npm search for rollup-plugin for Rollup plugins.

Enforcing Plugin Ordering #

For compatibility with some Rollup plugins, it may be needed to enforce the order of the plugin or only apply at build time. This should be an implementation detail for Wite plugins. You can enforce the position of a plugin with the enforce modifier:

• pre: invoke plugin before Wite core plugins
• default: invoke plugin after Wite core plugins
• post: invoke plugin after Wite build plugins

// wite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'wite'

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre'
    }
  ]
})

Check out Plugins API Guide for detailed information.

Conditional Application #

By default, plugins are invoked for both serve and build. In cases where a plugin needs to be conditionally applied only during serve or build, use the apply property to only invoke them during 'build' or 'serve':

// wite.config.js
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'wite'

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build'
    }
  ]
})

Building Plugins #

Check out the Plugins API Guide for documentation about creating plugins.