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

• @offen/esbuild-plugin-jsonschema: Compile and pack JSON schema definitions on import.
• 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-elm: A plugin to compile an elm project with esbuild.
• esbuild-plugin-glsl: A plugin that adds support for GLSL file imports with optional shader minification.
• esbuild-plugin-glslify: A plugin to 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-less: A plugin to transform LESS files to CSS files.
• 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-sass: A plugin to transform SASS files to CSS files
• esbuild-plugin-svgr: A plugin to import *.svg files as React components.
• esbuild-plugin-yaml: A plugin to load YAML files as ES6 modules.
• esbuild-sass-plugin: Yet another SASS to CSS but with support for lit-element's styles
• esbuild-stylus-loader: A plugin to transform stylus files to css files.
• esbuild-svelte: A plugin to load and compile Svelte components.
• essass: A plugin to transform SASS files to CSS files.

Other plugins

• @fal-works/esbuild-plugin-global-externals: A plugin to replace module imports with global variables.
• @yarnpkg/esbuild-plugin-pnp: A plugin adding support for Yarn Plug'n'Play installs.
• decky: A plugin that makes TypeScript experimental decorators run at compile-time, enabling macros and potentially reducing bundle size
• esbuild-plugin-alias: A plugin to resolve dynamic path aliases.
• esbuild-plugin-babel: A plugin to compile files with Babel.
• esbuild-plugin-browserify-adapter: An adapter to use existing Browserify transforms as esbuild plugins.
• esbuild-plugin-cache: A plugin to cache http/https modules. It works with import-maps.
• esbuild-plugin-flow: A plugin to strip types for Flow files using flow-remove-types package.
• 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-inline-import: A plugin that inlines and optionally transforms imports with a configurable prefix.
• 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-velcro: A plugin to load npm (bare module) dependencies from the cloud and requiring no previous npm install.
• esbuild-plugin-webpack-bridge: A plugin that allows to use webpack loaders.
• esbuild-svelte-paths: A plugin that resolves shortcuted pathes for Svelte components.

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:

• example-esbuild-plugin: 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