Convert Figma logo to code with AI

evanw logoesbuild

An extremely fast bundler for the web

37,921
1,127
37,921
478

Top Related Projects

43,380

The zero configuration build tool for the web. 📦🚀

25,227

Next-generation ES module bundler

64,559

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

67,112

Next generation frontend tooling. It's fast!

30,914

Rust-based platform for the Web

25,992

Build system optimized for JavaScript and TypeScript, written in Rust

Quick Overview

esbuild is an extremely fast JavaScript bundler and minifier. It's designed to be a high-performance alternative to other popular build tools like webpack or Rollup, with a focus on speed and simplicity.

Pros

  • Incredibly fast build times, often 10-100x faster than other tools
  • Simple and easy-to-use API
  • Supports modern JavaScript features and TypeScript out of the box
  • Minimal configuration required for most use cases

Cons

  • Less extensive plugin ecosystem compared to more established tools
  • Some advanced features found in other bundlers may not be available
  • Documentation can be sparse for more complex use cases
  • Still relatively new, which may lead to breaking changes in future versions

Code Examples

  1. Basic bundling:
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['app.js'],
  bundle: true,
  outfile: 'out.js',
}).catch(() => process.exit(1));
  1. Minification and source maps:
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['app.js'],
  bundle: true,
  minify: true,
  sourcemap: true,
  outfile: 'out.js',
}).catch(() => process.exit(1));
  1. Using with TypeScript:
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['app.ts'],
  bundle: true,
  outfile: 'out.js',
}).catch(() => process.exit(1));

Getting Started

To get started with esbuild, first install it in your project:

npm install esbuild

Then, create a simple build script (e.g., build.js):

const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
}).catch(() => process.exit(1));

Run the build script with Node.js:

node build.js

This will create a bundled bundle.js file in the dist directory.

Competitor Comparisons

43,380

The zero configuration build tool for the web. 📦🚀

Pros of Parcel

  • Zero configuration out of the box, making it easier for beginners
  • Built-in support for a wide range of file types and assets
  • Automatic code splitting for optimized loading

Cons of Parcel

  • Slower build times for larger projects compared to esbuild
  • Less customizable and flexible for advanced use cases
  • Larger bundle sizes in some scenarios

Code Comparison

Parcel:

// No configuration needed, just run:
parcel index.html

esbuild:

require('esbuild').build({
  entryPoints: ['app.js'],
  bundle: true,
  outfile: 'out.js',
}).catch(() => process.exit(1))

Parcel focuses on simplicity and ease of use, requiring no configuration for most projects. It automatically handles various file types and optimizations. However, it may be slower and less flexible for complex builds.

esbuild, on the other hand, prioritizes speed and performance. It offers faster build times and more control over the bundling process, but requires more manual configuration and may have less built-in support for certain file types.

The choice between Parcel and esbuild depends on project requirements, team expertise, and the need for customization versus out-of-the-box functionality.

25,227

Next-generation ES module bundler

Pros of Rollup

  • More mature and established project with a larger ecosystem of plugins
  • Better support for code splitting and tree-shaking
  • Excellent for creating libraries and frameworks

Cons of Rollup

  • Generally slower build times compared to esbuild
  • More complex configuration required for advanced use cases
  • Less suitable for large applications with many dependencies

Code Comparison

Rollup configuration:

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

esbuild configuration:

require('esbuild').build({
  entryPoints: ['src/main.js'],
  outfile: 'bundle.js',
  bundle: true
}).catch(() => process.exit(1))

Both tools aim to bundle JavaScript modules, but esbuild focuses on speed and simplicity, while Rollup offers more flexibility and advanced features. esbuild is often preferred for larger applications and quick builds, whereas Rollup excels in creating smaller, optimized bundles for libraries and frameworks. The choice between them depends on project requirements, build time priorities, and the need for specific features or plugins.

64,559

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

Pros of webpack

  • Highly configurable and extensible with a large ecosystem of plugins and loaders
  • Supports code splitting and dynamic imports for optimized loading
  • Well-established with extensive documentation and community support

Cons of webpack

  • Slower build times, especially for large projects
  • Steeper learning curve due to complex configuration options
  • Larger bundle sizes compared to more modern bundlers

Code Comparison

webpack configuration:

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
    ],
  },
};

esbuild configuration:

require('esbuild').build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
}).catch(() => process.exit(1))

esbuild offers a simpler configuration and faster build times, while webpack provides more advanced features and customization options. esbuild is designed for speed and simplicity, making it ideal for projects that don't require complex bundling setups. webpack remains a powerful choice for projects needing fine-grained control over the build process and extensive plugin support.

67,112

Next generation frontend tooling. It's fast!

Pros of Vite

  • Offers a more complete development environment with built-in dev server and hot module replacement
  • Provides a plugin system for extending functionality and integrating with various frameworks
  • Supports out-of-the-box TypeScript, JSX, and CSS pre-processing

Cons of Vite

  • Slightly slower build times for large projects compared to esbuild
  • More complex configuration and setup process
  • Larger bundle size due to additional features and dependencies

Code Comparison

Vite configuration:

// vite.config.js
export default {
  plugins: [react()],
  build: {
    rollupOptions: {
      // Rollup-specific options
    }
  }
}

esbuild configuration:

// build.js
require('esbuild').build({
  entryPoints: ['app.js'],
  bundle: true,
  outfile: 'out.js',
})

Both Vite and esbuild are powerful build tools for modern web development. Vite offers a more feature-rich development experience with its dev server and plugin ecosystem, while esbuild focuses on raw speed and simplicity. The choice between them depends on project requirements and developer preferences.

30,914

Rust-based platform for the Web

Pros of swc

  • Written in Rust, offering potential performance benefits and memory safety
  • Supports more advanced JavaScript and TypeScript features
  • Highly extensible plugin system for customization

Cons of swc

  • Larger bundle size due to Rust runtime
  • Less mature and potentially less stable than esbuild
  • Steeper learning curve for contributors due to Rust codebase

Code Comparison

swc:

use swc_ecma_ast::*;
use swc_ecma_visit::*;

struct MyVisitor;

impl Visit for MyVisitor {
    fn visit_ident(&mut self, n: &Ident) {
        println!("Visited identifier: {}", n.sym);
    }
}

esbuild:

let result = await esbuild.transform(code, {
  loader: 'tsx',
  minify: true,
  target: 'es2015'
})
console.log(result.code)

Both projects aim to provide fast JavaScript/TypeScript tooling, but they take different approaches. swc offers more advanced features and extensibility, while esbuild focuses on simplicity and raw speed. The choice between them depends on specific project requirements and performance needs.

25,992

Build system optimized for JavaScript and TypeScript, written in Rust

Pros of Turborepo

  • Focuses on monorepo management and task orchestration
  • Provides intelligent caching and incremental builds
  • Offers remote caching for improved CI/CD performance

Cons of Turborepo

  • Limited to JavaScript/TypeScript ecosystems
  • Requires more setup and configuration compared to ESBuild
  • Less suitable for single-package projects

Code Comparison

Turborepo (turbo.json):

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    }
  }
}

ESBuild (build script):

require('esbuild').build({
  entryPoints: ['app.js'],
  bundle: true,
  outfile: 'out.js',
}).catch(() => process.exit(1))

Turborepo excels in managing complex monorepos and optimizing build processes across multiple packages. It offers powerful features like remote caching and task orchestration, making it ideal for large-scale projects with interdependent packages.

ESBuild, on the other hand, is a highly efficient JavaScript bundler and minifier. It's designed for speed and simplicity, making it an excellent choice for single-package projects or as a bundling tool within a larger build process.

While Turborepo provides a higher-level abstraction for project management, ESBuild focuses on the core task of bundling JavaScript quickly and efficiently. The choice between the two depends on the project's scale, complexity, and specific requirements.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

esbuild: An extremely fast JavaScript bundler
Website | Getting started | Documentation | Plugins | FAQ

Why?

Our current build tools for the web are 10-100x slower than they could be:

Bar chart with benchmark results

The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.

Major features:

Check out the getting started instructions if you want to give esbuild a try.

NPM DownloadsLast 30 Days