brillout/community-plugins

Community plugins for esbuild

Community plugins for esbuild

⚠️ These plugins are from the community and are not officially supported. ⚠️

This is just a centralized list of 3rd-party plugins to make discovery easier. No guarantees are made as to plugin quality, compatibility, or lack of malicious code. As with all 3rd-party dependencies, you should review them yourself before including them in your project.

Plugin list

New file extensions (hosted on npm)

• @es-pack/esbuild-sass-plugin: A Sass plugin using Dart Sass with type definitions.
• @exact-realty/esbuild-plugin-responsive-images: A plugin for responsive images using Sharp for automatic resizing and conversion.
• @offen/esbuild-plugin-jsonschema: Compile and pack JSON schema definitions on import.
• esbuild-coffeescript: A plugin to compile CoffeeScript files (*.coffee & *.litcoffee files).
• esbuild-css-modules-plugin: A plugin to bundle xxx.modules.css or xxx.module.css into .js(x)/.ts(x). Can build with both bundle: true & bundle: false.
• esbuild-graphql-loader: A plugin allowing for GraphQL file imports.
• esbuild-mdx: A plugin to render .md and .mdx-delimited files as React components.
• esbuild-plugin-ajv: A plugin to load and compile standalone validation code from JSON Schema / JSON Type Definition.
• esbuild-plugin-class-modules: A plugin to compile your stylesheets with Saas, PostCSS and CSS Modules.
• esbuild-plugin-css-modules: Another one plugin to support CSS-modules (partially)
• esbuild-plugin-elm: A plugin to compile an elm project with esbuild.
• esbuild-plugin-global-api: An esbuild plugin for simplifying global API calls.
• esbuild-plugin-glsl: A plugin that adds support for GLSL file imports with optional shader minification.
• esbuild-plugin-glslify-inline: A plugin to process inline GLSL strings with glslify.
• esbuild-plugin-glslify: A plugin to import GLSL strings with glslify (a node.js-style module system for GLSL).
• esbuild-plugin-glslx: A plugin that supports *.glslx files including type checking of GLSL code.
• esbuild-plugin-handlebars an esbuild plugin to handle ... handlebars!
• esbuild-plugin-hjson A simple plugin to allow *.hjson files to be imported.
• esbuild-plugin-html-modules A plugin to load HTML Modules based on the proposed spec.
• esbuild-plugin-inline-image A plugin that switches loader for images between file and dataurl depending on size
• esbuild-plugin-inline-worker: A plugin to create inline Web Workers by importing .worker.js files.
• esbuild-plugin-less: A plugin to transform LESS files to CSS files.
• esbuild-plugin-lit-css: Import CSS files as tagged-template literals
• esbuild-plugin-lit: Import and minify static assets (CSS, SVG, HTML, XLIFF) as tagged-template literals using built-in capabilities.
• esbuild-plugin-markdown-import: Import, bundle, customize markdown files(support markdown2html by marked.).
• esbuild-plugin-markdown: Import & bundle markdown files
• esbuild-plugin-postcss: A plugin to use PostCSS.
• esbuild-plugin-postcss2: A plugin to use preprocessors and CSS modules with PostCSS.
• esbuild-plugin-prismjs: A plugin bundles PrismJs language and plugins.
• esbuild-plugin-properties: A plugin to load *.properties files.
• esbuild-plugin-purescript: Adds support for importing PureScript code.
• esbuild-plugin-sass: A plugin to transform Sass files to CSS files
• esbuild-plugin-spglsl: A plugin that adds support for GLSL file imports using spglsl.
• esbuild-plugin-svg: A plugin to import SVG files.
• esbuild-plugin-svgj: Import *.svg files as React components using svgj (~40x faster than svgr)
• esbuild-plugin-svgr: A plugin to import *.svg files as React components.
• esbuild-plugin-toml: A plugin to load *.toml files.
• esbuild-plugin-type-schema: A plugin to generate type schema using decorators in your custom way, Like type-graphql.
• esbuild-plugin-vue-next: A plugin to transform Vue 3.x SFC (*.vue files).
• esbuild-plugin-wat: A plugin to import .wasm (WebAssembly) and .wat (WebAssembly text format).
• esbuild-plugin-yaml: A plugin to load YAML files as ES6 modules.
• esbuild-postcss: A plugin to transform PostCSS files to CSS.
• esbuild-sass-plugin: Yet another Sass to CSS but with support for lit-element's styles
• esbuild-squoosh: A plugin for compressing/optimising images using libSquoosh
• esbuild-style-plugin A PostCSS plugin that support multiple preprocessors like SASS, STYLUS & LESS. Works with css modules and server side rendering / SSR.
• esbuild-stylus-loader: A plugin to transform stylus files to CSS files.
• esbuild-svelte: A plugin to load and compile Svelte components.
• esbuild-vue: A plugin to load and compile Vue 2 single-file components (*.vue files).
• esgleam: A plugin to compile gleam projects with esbuild.
• essass: A plugin to transform Sass files to CSS files.

Other plugins (hosted on npm)

• @akrc/esbuild-plugin-clean: A plugin to clean the output dir.
• @anatine/esbuild-decorators: This is a plugin for esbuild to handle the tsconfig setting "emitDecoratorMetadata": true using tsc to transpile .ts or .tsx files with decorators.
• @craftamap/esbuild-plugin-html A Plugin to create *.html-files from specified entry points.
• @datadog/build-plugin A plugin to monitor your build performances.
• @es-exec/esbuild-plugin-serve: A plugin for running your build output in a child process after the project build completes.
• @es-exec/esbuild-plugin-start: A plugin for running a script after your build completes, similar to nodemon.
• @exact-realty/esbuild-plugin-inline-js: A plugin for inline scripts with SRI support; runs a separate esbuild process and returns a string for ease of embedding.
• @fal-works/esbuild-plugin-global-externals: A plugin to replace module imports with global variables.
• @linjiajian999/esbuild-plugin-import: A plugin for modular import from ant, lodash, etc., similar to babel-plugin-import.
• @stylify/unplugin: A plugin for Stylify CSS with which you can use CSS-like selectors to style your website.
• @yarnpkg/esbuild-plugin-pnp: A plugin adding support for Yarn Plug'n'Play installs.
• altv-esbuild: Smoother development as well as production of JS/TS server/client scripts on the alt:V platform.
• decky: A plugin that makes TypeScript experimental decorators run at compile-time, enabling macros and potentially reducing bundle size
• esbuild-cf-functions-plugin: A plugin for building code compatible with CloudFront Functions
• esbuild-copy-files-plugin: Simple plugin that helps to copy files and folders across the application
• esbuild-copy-plugin: A plugin to copy some files from one destination to another
• esbuild-copy-static-files: An esbuild plugin to efficiently copy static files from a source directory to a destination directory
• esbuild-cross-browser-css: A plugin to make CSS compatible for all the different browsers.
• esbuild-dev-server: A plugin allows you to start a local server with hot reloading.
• esbuild-gas-plugin: A plugin that generate codes for Google Apps Script.
• esbuild-ignore-with-comments-plugin: A plugin that allows ignoring specific source files during build by adding the comment /* esbuild-ignore */.
• esbuild-plugin-alias-path: A plugin to transform TypeScript compilerOptions.path at compile-time.
• esbuild-plugin-alias: A plugin to resolve dynamic path aliases.
• esbuild-plugin-assets-manifest: A plugin to Generate manifest file like assets-webpack-plugin does.
• esbuild-plugin-babel-flow: A plugin that allows you to strip off Flow annotations from JavaScript code using Babel.
• esbuild-plugin-babel: A plugin to compile files with Babel.
• esbuild-plugin-brode: A plugin to add node polyfills core modules for the web.
• esbuild-plugin-browserify-adapter: An adapter to use existing Browserify transforms as esbuild plugins.
• esbuild-plugin-browserslist: Configure esbuild targets based on a browserslist query.
• esbuild-plugin-cache: A plugin to cache http/https modules. It works with import-maps.
• esbuild-plugin-clean: esbuild plugin for cleaning up output before build.
• esbuild-plugin-clear: A plugin to clear a directory.
• esbuild-plugin-compress: esbuild plugin for output compression (gzip/brotli).
• esbuild-plugin-copy-file: A plugin for asynchronously copying files in parallel before or after bundling.
• esbuild-plugin-copy-watch: A plugin to watch and copy static files.
• esbuild-plugin-copy: esbuild plugin for assets copy.
• esbuild-plugin-d-ts-path-alias: esbuild plugin for compiling typescript declarations along with path aliases transformation.
• esbuild-plugin-d.ts: esbuild convenience plugin for compiling TypeScript definitions along with JavaScript
• esbuild-plugin-decorator: esbuild plugin for TypeScript decorators compilation, support tsc/swc.
• esbuild-plugin-dev-server: Dev server for esbuild with live reload and error overlay.
• esbuild-plugin-drop: A plugin to remove assert, debug, etc.
• esbuild-plugin-eslint: Lint your esbuild bundles with eslint. 🧐
• esbuild-plugin-eslinter: A plugin for linting your builds, includes caching and node_module exclusion.
• esbuild-plugin-execute: A plugin to create esbuild plugins with executables.
• esbuild-plugin-file-path-extensions: A plugin to automatically insert file extensions in your built JavaScript files based on the specified target.
• esbuild-plugin-filelastmodified: A plugin to replace __fileLastModified__ with the actual time the file has been modified.
• esbuild-plugin-filesize: esbuild plugin for displaying output file size info.
• esbuild-plugin-flow: A plugin to strip types for Flow files using flow-remove-types package.
• esbuild-plugin-glob-import: Use globs to import multiple files.
• esbuild-plugin-glob: Use glob patterns as entryPoints
• esbuild-plugin-globals: A plugin to replace module contents with user provided globals.
• esbuild-plugin-ifdef A plugin that adds conditional code compilation for JavaScript/TypeScript using //#ifdef CONDITION comments.
• esbuild-plugin-ignore: A plugin to ignore some certain dependencies from bundling.
• esbuild-plugin-imagemin: A plugin to minimize images using imagemin.
• esbuild-plugin-import-glob: A plugin to import multiple files using the glob syntax. Similar to require.context from webpack.
• esbuild-plugin-inline-import: A plugin that inlines and optionally transforms imports with a configurable prefix.
• esbuild-plugin-lodash: A plugin that helps tree-shake non-es lodash imports, similar to how babel-plugin-lodash works.
• esbuild-plugin-manifest: A plugin to generate a hashed asset manifest file.
• esbuild-plugin-mxn-copy: A esbuild plugin for copying assets into the output directory of your bundle.
• esbuild-plugin-node-externals: esbuild plugin for node externals handing.
• esbuild-plugin-path-alias: A esbuild plugin to support path alias like resolve.alias in webpack config.
• esbuild-plugin-pino: An esbuild plugin to generate extra pino files for bundling
• esbuild-plugin-pipe: A plugin to pipe the output of esbuild plugins.
• esbuild-plugin-pnp: A plugin to support yarn 2 (berry) with PnP (Plug’n’Play).
• esbuild-plugin-postcss-literal: A plugin to transform tagged template literals with PostCSS.
• esbuild-plugin-progress: A plugin to add a progress spinner to esbuild.
• esbuild-plugin-pug: A plugin to to render pug templates
• esbuild-plugin-purgecss: A plugin to remove useless css class with purgecss.
• esbuild-plugin-realpath: A plugin to resolve the fs.realpath for modules in monorepos targeting the browser and node.
• esbuild-plugin-replace-regex: Simple plugin for replacing file content.
• esbuild-plugin-resolve: Change where a module dependency is resolved/imported from.
• esbuild-plugin-run: esbuild plugin to execute output file after build.
• esbuild-plugin-simple-css-modules: A plugin to transform .module.css files by prefixing classnames with a unique identifier
• esbuild-plugin-sixsixsix-killer: Remove bloc of code when 'if' statement meets 666 condition
• esbuild-plugin-solid-js: A plugin to apply solids jsx transforms with esbuild (without breaking/dropping sourcemaps)
• esbuild-plugin-stimulus: A plugin to automatically load Stimulus controllers from a folder.
• esbuild-plugin-swc: A plugin to support swc transform in Esbuild.
• esbuild-plugin-text-replace: Replace content before bundling with support for Filefilter, Namespace, Regex and Functions.
• esbuild-plugin-time: A simple plugin for time measuring of the build process.
• esbuild-plugin-transform: A plugin to pipe transformation plugins for esbuild.
• esbuild-plugin-tsc: A plugin to transform TypeScript files using the official TypeScript compiler. Allows usage of emitDecoratorMetadata.
• esbuild-plugin-umd-wrapper: UMD wrapper for esbuild.
• esbuild-plugin-velcro: A plugin to load npm (bare module) dependencies from the cloud and requiring no previous NPM install.
• esbuild-plugin-version-injector: A plugin to inject your application's version number or today's date into your files.
• esbuild-plugin-webpack-bridge: A plugin that allows to use webpack loaders.
• esbuild-plugin-write-file: A plugin for asynchronously creating/writing files in parallel before or after bundling.
• esbuild-plugins-node-modules-polyfill: A plugin to polyfill nodejs builtin modules for the browser.
• esbuild-svelte-paths: A plugin that resolves shortcuted pathes for Svelte components.

Plugins not hosted on npm (e.g. for Deno)

• esbuild-plugin-env: A plugin that exports the current environment as a module.
• esbuild-plugin-eval: A plugin that evaluates a module before importing it.
• esbuild-plugin-http-fetch: A plugin that resolves http(s) modules, for use with browsers and Deno.
• esbuild-plugin-sass-deno: A Plugin which adds support for SASS/SCSS using denosass.

How to use a plugin

To use an esbuild plugin, you generally import it into your build script and then pass it to the esbuild API like this:

const esbuild = require('esbuild')
const somePlugin = require('some-plugin')

esbuild.build({
  plugins: [
    somePlugin(),
  ],
  ...
}).catch(() => process.exit(1))

More documentation about plugins and the plugin API is available here.

Adding your plugin here

If you would like to add your plugin to this list, create a PR that updates this README file. The update should add a single bullet under the Plugin list section that starts with a link to the plugin and is followed by a brief one-sentence description. The text of the link should be the npm package name and it should be inserted in alphabetical order. It should look something like this:

• esbuild-plugin-example: A plugin to load *.example files.

Before creating a PR, please make sure that:

• The package is already published to npm
• You are the author of the plugin
• You are willing to respond to issues about the plugin if people file issues against it

Note: Even though the text "esbuild-plugin-example" above is a link, it's just example placeholder text. The project at the link destination intentionally doesn't exist. The text is only linked to demonstrate how you should format your entry.