bun-build

Files (4)

• SKILL.md
• optimization.md · references/
• plugins.md · references/
• targets.md · references/

SKILL.md (first lines)

---
name: bun-build
description: Create optimized production bundles with Bun's native bundler. Use when building applications for production, optimizing bundle sizes, setting up multi-environment builds, or replacing webpack/esbuild/rollup.
compatibility: Requires Bun 1.0+
allowed-tools: ["Bash", "Write", "Read"]
metadata:
  author: dale
  category: bun-runtime
  tags: [bun, build, bundler, production, optimization]
---

# Bun Production Build Configuration

Set up production builds using Bun's native bundler - fast, optimized bundle creation without webpack or esbuild.

## Quick Reference

For detailed patterns, see:
- **Build Targets**: [targets.md](references/targets.md) - Browser, Node.js, library, CLI configurations
- **Optimization**: [optimization.md](references/optimization.md) - Tree shaking, code splitting, analysis
- **Plugins**: [plugins.md](references/plugins.md) - Custom loaders and transformations

## Core Workflow

### 1. Check Prerequisites

```bash
# Verify Bun installation
bun --version

# Check project structure
ls -la package.json src/
```

### 2. Determine Build Requirements

Ask the user about their build needs:

- **Application Type**: Frontend SPA, Node.js backend, CLI tool, or library
- **Target Platform**: Browser, Node.js, Bun runtime, or Cloudflare Workers
- **Output Format**: ESM (modern), CommonJS (legacy), or both

### 3. Create Basic Build Script

Create `build.ts` in project root:

```typescript
#!/usr/bin/env bun

const result = await Bun.build({
  entrypoints: ['./src/index.ts'],
  outdir: './dist',
  target: 'browser', // or 'node', 'bun'
  format: 'esm', // or 'cjs', 'iife'
  minify: true,
  splitting: true,
  sourcemap: 'external',
});

if (!result.success) {
  console.error('Build failed');
  for (const message of result.logs) {
    console.error(message);
  }
  process.exit(1);
}

console.log('✅ Build successful');
console.log(`📦 ${result.outputs.length} files generated`);

// Show bundle sizes
for (const output of result.outputs) {
  const size = (output.size / 1024).toFixed(2);
  console.log(`  ${output.path} - ${size} KB`);
}
```

### 4. Configure for Target Platform

**For Browser/Frontend:**

```typescript
await Bun.build({
  entrypoints: ['./src/index.tsx'],
  outdir: './dist',
  target: 'browser',
  format: 'esm',
  minify: true,
  splitting: true,
  define: {
    'process.env.NODE_ENV': '"production"',
  },
  loader: {
    '.png': 'file',
    '.svg': 'dataurl',
    '.css': 'css',
  },
});
```

**For Node.js Backend:**

```typescript
await Bun.build({
  entrypoints: ['./src/server.ts'],
  outdir: './dist',
  target: 'node',
  format: 'esm',
  minify: true,
  external: ['*'], // Don't bundle node_modules
});
```

**For libraries, CLI tools, and other targets**, see [targets.md](references/targets.md).

### 5. Add Production Optimizations

```typescript
await Bun.build({
  entrypoints: ['./src/index.ts'],

From involvex/syncstuff, MIT.

More from involvex/syncstuff