Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
unplugin
Advanced tools
Package description
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.
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!');
}
});
A Rollup plugin that allows replacing strings in files while bundling. It's similar to unplugin's transformation feature but is specific to Rollup.
A Webpack plugin to add virtual modules to the module graph. It provides functionality similar to unplugin's virtual modules but is specific to Webpack.
A Vite-specific plugin to support Vue 2.x. It demonstrates how plugins can be tailored to specific build tools, whereas unplugin aims to be build-tool agnostic.
Readme
Unified plugin system for build tools.
Currently supports:
unplugin
extends the excellent Rollup plugin API as the unified plugin interface and provides a compatible layer base on the build tools used with.
Hook | Rollup | Vite | Webpack 4 | Webpack 5 | esbuild | Rspack |
---|---|---|---|---|---|---|
enforce | ❌ 1 | ✅ | ✅ | ✅ | ❌ 1 | ✅ |
buildStart | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
resolveId | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
loadInclude 2 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
load | ✅ | ✅ | ✅ | ✅ | ✅ 3 | ✅ |
transformInclude 2 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
transform | ✅ | ✅ | ✅ | ✅ | ✅ 3 | ✅ |
watchChange | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ |
buildEnd | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
writeBundle 4 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
enforce
to control the order of plugins. Users need to maintain the order manually.load
and transform
results.writeBundle
is only serves as a hook for the timing. It doesn't pass any arguments.Warning: The Rspack support is experimental. Future changes to Rspack integrations might not follow semver, please pin
unplugin
in your dependency when using. It's not recommended to use in production.
Hook | Rollup | Vite | Webpack 4 | Webpack 5 | esbuild | Rspack |
---|---|---|---|---|---|---|
this.parse | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
this.addWatchFile | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ |
this.emitFile 5 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
this.getWatchFiles | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ |
this.warn | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
this.error | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
this.emitFile
only supports the EmittedAsset
variant.import { createUnplugin } from 'unplugin'
export const unplugin = createUnplugin((options: UserOptions) => {
return {
name: 'unplugin-prefixed-name',
// 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 coming
}
})
export const vitePlugin = unplugin.vite
export const rollupPlugin = unplugin.rollup
export const webpackPlugin = unplugin.webpack
export const rspackPlugin = unplugin.rspack
export const esbuildPlugin = unplugin.esbuild
Since v0.10.0
, unplugin supports constructing multiple nested plugins to behave like a single one. For example:
Rollup | Vite | Webpack 4 | Webpack 5 | Rspack | esbuild |
---|---|---|---|---|---|
✅ >=3.1 6 | ✅ | ✅ | ✅ | ✅ | ⚠️7 |
>=3.1.0
when using nested plugins. For single plugin format, unplugin works for any version of Rollup.transform
hook of the nested plugin will not work on esbuild yet. Other hooks like load
or resolveId
work fine. We will try to find a way to support it in the future.import { createUnplugin } from 'unplugin'
export const unplugin = createUnplugin((options: UserOptions) => {
return [
{
name: 'plugin-a',
transform(code) {
// ...
},
},
{
name: 'plugin-b',
resolveId(id) {
// ...
},
},
]
})
// vite.config.ts
import UnpluginFeature from './unplugin-feature'
export default {
plugins: [
UnpluginFeature.vite({ /* options */ }),
],
}
// rollup.config.js
import UnpluginFeature from './unplugin-feature'
export default {
plugins: [
UnpluginFeature.rollup({ /* options */ }),
],
}
// webpack.config.js
module.exports = {
plugins: [
require('./unplugin-feature').webpack({ /* options */ }),
],
}
// esbuild.config.js
import { build } from 'esbuild'
build({
plugins: [
require('./unplugin-feature').esbuild({ /* options */ }),
],
})
// rspack.config.js
module.exports = {
plugins: [
require('./unplugin-feature').rspack({ /* options */ }),
],
}
While unplugin
provides compatible layers for some hooks, the functionality of it is limited to the common subset of the build's plugins capability. For more advanced framework-specific usages, unplugin
provides an escape hatch for that.
export const unplugin = createUnplugin((options: UserOptions, meta) => {
console.log(meta.framework) // 'vite' | 'rollup' | 'webpack' | 'rspack' | 'esbuild'
return {
// Common unplugin hooks
name: 'unplugin-prefixed-name',
transformInclude(id) { /* ... */ },
transform(code) { /* ... */ },
// Framework specific hooks
vite: {
// Vite plugin
configureServer(server) {
// configure Vite server
},
// ...
},
rollup: {
// Rollup plugin
},
webpack(compiler) {
// Configure Webpack compiler
},
rspack(compiler) {
// Configure Rspack compiler
},
esbuild: {
// Change the filter of onResolve and onLoad
// onResolveFilter?: RegExp,
// onLoadFilter?: RegExp,
// Tell esbuild how to interpret the contents. By default unplugin tries to guess the loader
// from file extension (eg: .js -> "js", .jsx -> 'jsx')
// loader?: (Loader | (code: string, id: string) => Loader)
// Or you can completely replace the setup logic
// setup?: EsbuildPlugin.setup,
},
}
})
The package exports a set of functions in place of createUnplugin
that allow for the creation of plugins for specific bundlers.
Each of the function takes the same generic factory argument as createUnplugin
.
import {
createEsbuildPlugin,
createRollupPlugin,
createRspackPlugin,
createVitePlugin,
createWebpackPlugin
} from 'unplugin'
const vitePlugin = createVitePlugin({ /* options */ })
const rollupPlugin = createRollupPlugin({ /* options */ })
const esbuildPlugin = createEsbuildPlugin({ /* options */ })
const webpackPlugin = createWebpackPlugin({ /* options */ })
const rspackPlugin = createRspackPlugin({ /* options */ })
Plugins powered by unplugin should have a clear name with unplugin-
prefix.
Include unplugin
keyword in package.json
.
To provide better DX, packages could export 2 kinds of entry points:
Default export: the returned value of createUnplugin
function
import UnpluginFeature from 'unplugin-feature'
Subpath exports: properties of the returned value of createUnplugin
function for each framework users
import VitePlugin from 'unplugin-feature/vite'
Refer to unplugin-starter for more details about this setup.
We have started a GitHub organization to host and collaborate on popular unplugin plugins: github.com/unplugin. You can go there to find more plugins or even join us with your own plugins!
MIT License © 2021-PRESENT Nuxt Contrib
FAQs
Unified plugin system for build tools
We found that unplugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
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.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).