tessl/npm-rollup-plugin-esbuild

A Rollup plugin that uses esbuild as a fast TypeScript/JavaScript compiler and minifier, replacing traditional tools like rollup-plugin-typescript2 and rollup-plugin-terser

—

Pending

Overview

Eval results

Files

Main Plugin

Name: tessl/npm-rollup-plugin-esbuild
Author: tessl

The main esbuild plugin function provides comprehensive TypeScript/JavaScript transformation, compilation, and optional minification within the Rollup build pipeline.

Capabilities

Main Plugin Function

Creates a Rollup plugin that transforms TypeScript/JavaScript files using esbuild's fast compilation engine.

/**
 * Creates a Rollup plugin for esbuild transformation
 * @param options - Configuration options for the plugin
 * @returns Rollup plugin instance
 */
function esbuild(options?: Options): RollupPlugin;

interface Options {
  // File filtering
  include?: FilterPattern;
  exclude?: FilterPattern;
  
  // Source maps
  sourceMap?: boolean;
  
  // Dependency optimization
  optimizeDeps?: OptimizeDepsOptions;
  
  // TypeScript configuration
  tsconfig?: string | false;
  
  // Custom loaders
  loaders?: { [ext: string]: Loader | false };
  
  // Minification options
  minify?: boolean;
  minifyWhitespace?: boolean;
  minifyIdentifiers?: boolean;
  minifySyntax?: boolean;
  
  // Compilation target
  target?: string | string[];
  
  // JSX transformation
  jsx?: "transform" | "preserve" | "automatic";
  jsxFactory?: string;
  jsxFragment?: string;
  jsxImportSource?: string;
  jsxDev?: boolean;
  
  // Code transformation
  define?: { [key: string]: string };
  charset?: "ascii" | "utf8";
  treeShaking?: boolean;
  ignoreAnnotations?: boolean;
  legalComments?: "none" | "inline" | "eof" | "linked" | "external";
  keepNames?: boolean;
  format?: "iife" | "cjs" | "esm";
  globalName?: string;
  
  // Advanced minification
  mangleProps?: RegExp;
  reserveProps?: RegExp;
  mangleQuoted?: boolean;
  mangleCache?: { [key: string]: string | false };
  drop?: ("console" | "debugger")[];
  dropLabels?: string[];
}

type FilterPattern = string | RegExp | (string | RegExp)[];
type Loader = "js" | "jsx" | "ts" | "tsx" | "css" | "json" | "text" | "base64" | "binary" | "dataurl";

interface OptimizeDepsOptions {
  include: string[];
  exclude?: string[];
  cwd: string;
  esbuildOptions?: any;
  sourceMap: boolean;
}

Usage Examples:

import esbuild from "rollup-plugin-esbuild";

// Basic TypeScript compilation
export default {
  plugins: [
    esbuild({
      include: /\.[jt]sx?$/,
      exclude: /node_modules/,
      target: "es2020"
    })
  ]
};

// With minification for production
export default {
  plugins: [
    esbuild({
      minify: process.env.NODE_ENV === "production",
      target: "es2017",
      sourceMap: true
    })
  ]
};

// Custom JSX configuration
export default {
  plugins: [
    esbuild({
      jsx: "transform",
      jsxFactory: "h",
      jsxFragment: "Fragment"
    })
  ]
};

// With custom loaders
export default {
  plugins: [
    esbuild({
      loaders: {
        ".json": "json",
        ".js": "jsx" // Enable JSX in .js files
      }
    })
  ]
};

// With dependency optimization
export default {
  plugins: [
    esbuild({
      optimizeDeps: {
        include: ["react", "react-dom"]
      }
    })
  ]
};

File Filtering Options

Configure which files the plugin should process.

interface FilterOptions {
  /** Files to include for processing */
  include?: FilterPattern;
  /** Files to exclude from processing */
  exclude?: FilterPattern;
}

type FilterPattern = string | RegExp | (string | RegExp)[];

Default behavior:

include: /\.[jt]sx?$/ (matches .js, .jsx, .ts, .tsx files)
exclude: /node_modules/

TypeScript Configuration

Control how TypeScript configuration is handled.

interface TypeScriptOptions {
  /** Path to tsconfig.json file, or false to disable */
  tsconfig?: string | false;
}

Default behavior:

Automatically detects tsconfig.json in the project
Inherits JSX settings, target, and other compiler options
Set to false to disable TypeScript configuration inheritance

Custom Loaders

Configure file type processing with custom loaders.

interface LoaderOptions {
  /** Map file extensions to esbuild loaders */
  loaders?: { [ext: string]: Loader | false };
}

type Loader = "js" | "jsx" | "ts" | "tsx" | "css" | "json" | "text" | "base64" | "binary" | "dataurl";

Usage:

{
  loaders: {
    ".json": "json",      // Process JSON files
    ".js": "jsx",         // Enable JSX in .js files  
    ".txt": "text",       // Load text files as strings
    ".css": false         // Disable processing for CSS files
  }
}

JSX Configuration

Configure JSX transformation behavior.

interface JSXOptions {
  /** JSX transformation mode */
  jsx?: "transform" | "preserve" | "automatic";
  /** JSX factory function name */
  jsxFactory?: string;
  /** JSX fragment function name */
  jsxFragment?: string;
  /** Import source for automatic JSX runtime */
  jsxImportSource?: string;
  /** Enable JSX development mode with additional runtime checks */
  jsxDev?: boolean;
}

Examples:

// React classic runtime
{
  jsx: "transform",
  jsxFactory: "React.createElement",
  jsxFragment: "React.Fragment"
}

// React automatic runtime
{
  jsx: "automatic",
  jsxImportSource: "react"
}

// Preact
{
  jsx: "transform", 
  jsxFactory: "h",
  jsxFragment: "Fragment"
}

Minification Options

Configure code minification behavior.

interface MinificationOptions {
  /** Enable full minification */
  minify?: boolean;
  /** Minify whitespace only */
  minifyWhitespace?: boolean;
  /** Minify identifiers only */
  minifyIdentifiers?: boolean;
  /** Minify syntax only */
  minifySyntax?: boolean;
  /** Preserve function/class names */
  keepNames?: boolean;
  /** Handle legal comments */
  legalComments?: "none" | "inline" | "eof" | "linked" | "external";
  /** Drop console statements and debugger */
  drop?: ("console" | "debugger")[];
  /** Drop labeled statements */
  dropLabels?: string[];
}

Code Transformation Options

Configure various code transformation behaviors.

interface TransformationOptions {
  /** Compilation target */
  target?: string | string[];
  /** Global variable replacements */
  define?: { [key: string]: string };
  /** Output character encoding */
  charset?: "ascii" | "utf8";
  /** Enable tree shaking */
  treeShaking?: boolean;
  /** Ignore @__PURE__ annotations */
  ignoreAnnotations?: boolean;
  /** Output format for standalone builds */
  format?: "iife" | "cjs" | "esm";
  /** Global name for IIFE format */
  globalName?: string;
}

Examples:

{
  target: ["es2020", "chrome80"],
  define: {
    "process.env.NODE_ENV": '"production"',
    "__VERSION__": '"1.0.0"'
  },
  format: "esm",
  charset: "utf8"
}

Install with Tessl CLI

npx tessl i tessl/npm-rollup-plugin-esbuild

docs

dependency-optimization.md