The unplugin npm package is a framework-agnostic plugin system designed to create plugins that work across different build tools like Webpack, Vite, Rollup, and more. It allows developers to write a plugin once and have it compatible with multiple build systems without the need to rewrite it for each one.

What are unplugin's main functionalities?

Virtual Modules

Create virtual modules that can be imported by your code. These modules don't exist on the filesystem but are created on the fly by the plugin.

unplugin.createPlugin({
  resolveId(id) {
    if (id === 'virtual-module') return id;
  },
  load(id) {
    if (id === 'virtual-module') return 'export default "This is virtual!"';
  }
});

Transformations

Apply custom transformations to your code. This can be used to modify the source code of files before they are bundled.

unplugin.createPlugin({
  transform(code, id) {
    if (id.endsWith('.custom')) {
      return code.replace(/find/g, 'replace');
    }
  }
});

Custom Build Steps

Execute custom code at different stages of the build process. This can be used to perform tasks before or after the build.

unplugin.createPlugin({
  buildStart() {
    console.log('Build started!');
  },
  buildEnd() {
    console.log('Build finished!');
  }
});

Other packages similar to unplugin

Changelog

Source

0.0.4 (2021-07-25)

Features

webpack: load hook initial implementation (e671b62)

Readme

Source

unplugin

Experimental

Support

Rollup	Webpack
`transform`	✅
`resolveId`	✅
`load`	🚧

Usage

import { createUnplugin } from 'unplugin'

const plugin = createUnplugin((options: UserOptions) => {
  return {
    name: 'my-first-unplugin',
    // webpack's id filter is outside of loader logic,
    // an additional hook is needed for better perf on webpack
    transformInclude (id) {
      return id.endsWith('.vue')
    },
    // just like rollup transform
    transform (code) {
      return code.replace(/<template>/, `<template><div>Injected</div>`)
    },
    // more hooks incoming
  }
})

const rollupPlugin = plugin.rollup({ /* ...user options */ })
const webpackPlugin = plugin.webpack()

FAQs

What is unplugin?

Is unplugin popular?

Is unplugin well maintained?

Last updated on 25 Jul 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install