esbuild Bundler Samples

// esbuild Basic Configuration Setup

// 1. Installation
// npm install esbuild --save-dev
// npm install esbuild-sass-plugin esbuild-plugin-image --save-dev (for additional plugins)

// 2. Command Line Usage Examples
/*
# Basic build
esbuild src/index.js --bundle --outfile=dist/bundle.js

# TypeScript build
esbuild src/index.ts --bundle --outfile=dist/bundle.js --target=es2020

# Watch mode
esbuild src/index.js --bundle --outfile=dist/bundle.js --watch

# Development mode with source maps
esbuild src/index.js --bundle --outfile=dist/bundle.js --sourcemap --define:process.env.NODE_ENV="development"

# Production build with minification
esbuild src/index.ts --bundle --outfile=dist/bundle.min.js --minify --target=es2020

# Multiple entry points
esbuild src/app.js src/worker.js --bundle --outdir=dist

# CSS handling
esbuild src/app.js --bundle --outfile=dist/bundle.js --bundle-css=dist/style.css

# External packages (don't bundle)
esbuild src/app.js --bundle --outfile=dist/bundle.js --external:react --external:react-dom

# Specific target environments
esbuild src/app.js --bundle --outfile=dist/bundle.js --target=chrome58,firefox57,safari11
*/

// 3. Build Script (build.js)
const esbuild = require('esbuild');

const buildOptions = {
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/index.js',
  minify: process.env.NODE_ENV === 'production',
  sourcemap: process.env.NODE_ENV !== 'production',
  target: 'es2020',
  define: {
    'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
  },
  format: 'esm',
  platform: 'browser',
  external: [],
  loader: {
    '.ts': 'ts',
    '.tsx': 'tsx',
    '.js': 'js',
    '.jsx': 'jsx',
    '.css': 'css',
    '.json': 'json',
    '.txt': 'text',
    '.png': 'file',
    '.jpg': 'file',
    '.svg': 'file'
  }
};

async function build() {
  try {
    console.log('Building with esbuild...');

    if (process.env.WATCH === 'true') {
      // Watch mode
      const context = await esbuild.context(buildOptions);
      await context.watch();
      console.log('Watching for changes...');
    } else {
      // Single build
      const result = await esbuild.build(buildOptions);

      if (result.errors.length > 0) {
        console.error('Build errors:');
        result.errors.forEach(error => console.error(error));
        process.exit(1);
      }

      if (result.warnings.length > 0) {
        console.warn('Build warnings:');
        result.warnings.forEach(warning => console.warn(warning));
      }

      console.log('Build completed successfully!');
    }
  } catch (error) {
    console.error('Build failed:', error);
    process.exit(1);
  }
}

build();

// esbuild Plugins and Workflow Examples

// 1. Custom Plugin Development
// plugins/env-plugin.js
const envPlugin = (options = {}) => ({
  name: 'env',
  setup(build) {
    build.onResolve({ filter: /^env:/ }, (args) => {
      return {
        path: args.path.replace('env:', ''),
        namespace: 'env-ns'
      };
    });

    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, (args) => {
      const envVar = process.env[args.path] || options.default || '';

      return {
        contents: `export default ${JSON.stringify(envVar)};`,
        loader: 'js'
      };
    });
  }
});

// 2. File Copy Plugin
// plugins/copy-plugin.js
const path = require('path');
const fs = require('fs');

const copyPlugin = (patterns = []) => ({
  name: 'copy',
  setup(build) {
    build.onEnd(() => {
      patterns.forEach(({ from, to }) => {
        const srcPath = path.resolve(from);
        const destPath = path.resolve(to);

        if (fs.existsSync(srcPath)) {
          fs.mkdirSync(path.dirname(destPath), { recursive: true });
          fs.copyFileSync(srcPath, destPath);
          console.log(`Copied ${srcPath} to ${destPath}`);
        }
      });
    });
  }
});

// 3. Image Optimization Plugin
// plugins/image-plugin.js
const fsImage = require('fs');
const pathImage = require('path');
const { createHash } = require('crypto');

const imagePlugin = (options = {}) => ({
  name: 'image',
  setup(build) {
    build.onResolve({ filter: /\.(png|jpg|jpeg|gif|webp)$/ }, (args) => {
      const resolvedPath = pathImage.resolve(args.resolveDir, args.path);
      return {
        path: resolvedPath,
        namespace: 'image-file'
      };
    });

    build.onLoad({ filter: /\.(png|jpg|jpeg|gif|webp)$/, namespace: 'image-file' }, async (args) => {
      const contents = fsImage.readFileSync(args.path);
      const hash = createHash('md5').update(contents).digest('hex').slice(0, 8);
      const ext = pathImage.extname(args.path);
      const fileName = `image-${hash}${ext}`;
      const publicDir = options.publicDir || 'public/assets';
      const publicPath = pathImage.join(publicDir, fileName);

      // Create output directory if it doesn't exist
      fsImage.mkdirSync(pathImage.dirname(publicPath), { recursive: true });
      fsImage.writeFileSync(publicPath, contents);

      const importPath = `/${publicPath}`;

      return {
        contents: `export default ${JSON.stringify(importPath)};`,
        loader: 'js'
      };
    });
  }
});

// 4. Advanced Build Configuration with Plugins
// advanced-build.js
const esbuild = require('esbuild');
const path = require('path');

// Import custom plugins
const { envPlugin } = require('./plugins/env-plugin');
const { copyPlugin } = require('./plugins/copy-plugin');
const { imagePlugin } = require('./plugins/image-plugin');

const buildConfig = {
  entryPoints: ['src/index.tsx', 'src/styles/main.css'],
  bundle: true,
  outdir: 'dist',
  minify: process.env.NODE_ENV === 'production',
  sourcemap: process.env.NODE_ENV !== 'production',
  target: 'es2020',
  define: {
    'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
  },
  loader: {
    '.ts': 'ts',
    '.tsx': 'tsx',
    '.jsx': 'jsx',
    '.css': 'css'
  },
  plugins: [
    imagePlugin({
      publicDir: 'dist/assets'
    }),
    envPlugin({
      default: {
        API_URL: 'http://localhost:3001'
      }
    }),
    copyPlugin([
      { from: 'public/index.html', to: 'dist/index.html' },
      { from: 'public/favicon.ico', to: 'dist/favicon.ico' }
    ])
  ]
};

async function build() {
  try {
    console.log('🚀 Starting advanced build...');

    const result = await esbuild.build(buildConfig);

    if (result.errors.length === 0) {
      console.log('✅ Build completed successfully!');
    } else {
      console.error('❌ Build failed with errors:');
      result.errors.forEach(error => console.error(error));
    }
  } catch (error) {
    console.error('💥 Build error:', error);
    process.exit(1);
  }
}

build();

// esbuild Integration with Modern Frameworks

// 1. React + TypeScript Integration
// build/react.config.js
const esbuild = require('esbuild');
const path = require('path');

const reactConfig = {
  entryPoints: {
    main: 'src/index.tsx',
    'service-worker': 'src/sw.ts'
  },
  bundle: true,
  outdir: 'dist',
  minify: process.env.NODE_ENV === 'production',
  sourcemap: process.env.NODE_ENV !== 'production',
  target: ['es2020', 'chrome91', 'firefox90', 'safari14'],
  define: {
    'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
    'process.env.REACT_APP_VERSION': `"${require('./package.json').version}"`
  },
  loader: {
    '.ts': 'ts',
    '.tsx': 'tsx',
    '.jsx': 'jsx'
  },
  jsxFactory: 'React.createElement',
  jsxFragment: 'React.Fragment',
  inject: [
    path.resolve(__dirname, 'src/shim/react.js')
  ]
};

// 2. Vue 3 + TypeScript Integration
// build/vue.config.js
const esbuild = require('esbuild');
const path = require('path');

const vueConfig = {
  entryPoints: ['src/main.ts'],
  bundle: true,
  outfile: 'dist/app.js',
  minify: process.env.NODE_ENV === 'production',
  sourcemap: process.env.NODE_ENV !== 'production',
  target: ['es2020', 'chrome91', 'firefox90', 'safari14'],
  define: {
    'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
    '__VUE_OPTIONS_API__': 'true',
    '__VUE_PROD_DEVTOOLS__': 'false'
  }
};

// 3. Express.js + TypeScript Backend
// build/backend.config.js
const esbuild = require('esbuild');
const path = require('path');

const backendConfig = {
  entryPoints: {
    app: 'src/index.ts',
    'generate-types': 'src/scripts/generate-types.ts'
  },
  bundle: true,
  outdir: 'dist',
  minify: process.env.NODE_ENV === 'production',
  sourcemap: process.env.NODE_ENV !== 'production',
  target: 'node18',
  platform: 'node',
  format: 'cjs',
  define: {
    'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
  },
  external: [
    'aws-sdk',
    'pg',
    'mysql2',
    'mongodb',
    'redis',
    'bull',
    'nodemailer',
    'sharp',
    'prisma'
  ]
};

// 4. Electron + React Integration
// build/electron.config.js
const esbuild = require('esbuild');
const path = require('path');

class ElectronBuilder {
  async build() {
    console.log('🔨 Building Electron app...');

    // Build main process
    await this.buildMain();

    // Build renderer process
    await this.buildRenderer();

    console.log('✅ Electron build completed!');
  }

  async buildMain() {
    const mainConfig = {
      entryPoints: ['src/main/index.ts'],
      bundle: true,
      outfile: 'dist/main/index.js',
      minify: process.env.NODE_ENV === 'production',
      sourcemap: false,
      target: 'node18',
      platform: 'node',
      format: 'cjs',
      external: ['electron'],
      define: {
        'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
      }
    };

    await esbuild.build(mainConfig);
  }

  async buildRenderer() {
    const rendererConfig = {
      entryPoints: ['src/renderer/index.tsx'],
      bundle: true,
      outfile: 'dist/renderer/index.js',
      minify: process.env.NODE_ENV === 'production',
      sourcemap: process.env.NODE_ENV !== 'production',
      target: ['es2020', 'chrome91', 'firefox90', 'safari14'],
      platform: 'browser',
      format: 'esm',
      jsxFactory: 'React.createElement',
      jsxFragment: 'React.Fragment',
      define: {
        'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
      }
    };

    await esbuild.build(rendererConfig);
  }
}

// 5. Svelte + TypeScript Integration
// build/svelte.config.js
const esbuild = require('esbuild');

const svelteConfig = {
  entryPoints: ['src/main.ts'],
  bundle: true,
  outfile: 'dist/app.js',
  minify: process.env.NODE_ENV === 'production',
  sourcemap: process.env.NODE_ENV !== 'production',
  target: ['es2020', 'chrome91', 'firefox90', 'safari14'],
  define: {
    'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
  }
};

// Export configurations for use
module.exports = {
  reactConfig,
  vueConfig,
  backendConfig,
  svelteConfig,
  ElectronBuilder
};