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)

@espack/esbuild-sass-plugin: A sass plugin using dart sass with type definitions.
@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-css-modules: Another one plugin to support CSS-modules (partially)
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-hjson A simple plugin to allow *.hjson files to be imported.
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-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-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-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-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-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).
essass: A plugin to transform SASS files to CSS files.

Other plugins (hosted on npm)

@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.
@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.
@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-gas-plugin: A plugin that generate codes for Google Apps Script.
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: A plugin to compile files with Babel.
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-d.ts: ESBuild convenience plugin for compiling typescript definitions along with javascript
esbuild-plugin-filelastmodified: A plugin to replace fileLastModified with the actual time the file has been modified.
esbuild-plugin-flow: A plugin to strip types for Flow files using flow-remove-types package.
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-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-path-alias: A esbuild plugin to support path alias like resolve.alias in webpack config.
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-resolve: Change where a module dependency is resolved/imported from.
esbuild-plugin-stimulus: A plugin to automatically load Stimulus controllers from a folder.
esbuild-plugin-text-replace: Replace content before bundling with support for Filefilter, Namespace, Regex and Functions.
esbuild-plugin-tsc: A plugin to transform typescript files using the official typescript compiler. Allows usage of emitDecoratorMetadata.
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.

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

esbuild-plugin-http-fetch: A plugin that resolves http(s) modules, for use with browsers and Deno.

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.

craftamap / community-plugins