Loading...
Loading...
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.
npx skill4agent add daleseo/bun-skills bun-build# Verify Bun installation
bun --version
# Check project structure
ls -la package.json src/build.ts#!/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`);
}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',
},
});await Bun.build({
entrypoints: ['./src/server.ts'],
outdir: './dist',
target: 'node',
format: 'esm',
minify: true,
external: ['*'], // Don't bundle node_modules
});await Bun.build({
entrypoints: ['./src/index.ts'],
outdir: './dist',
target: 'browser',
// Maximum minification
minify: {
whitespace: true,
identifiers: true,
syntax: true,
},
// Code splitting for optimal caching
splitting: true,
// Content hashing for cache busting
naming: {
entry: '[dir]/[name].[hash].[ext]',
chunk: 'chunks/[name].[hash].[ext]',
asset: 'assets/[name].[hash].[ext]',
},
// Source maps for debugging
sourcemap: 'external',
});build-env.ts#!/usr/bin/env bun
const env = process.env.NODE_ENV || 'development';
const configs = {
development: {
minify: false,
sourcemap: 'inline',
define: {
'process.env.NODE_ENV': '"development"',
'process.env.API_URL': '"http://localhost:3000"',
},
},
production: {
minify: true,
sourcemap: 'external',
define: {
'process.env.NODE_ENV': '"production"',
'process.env.API_URL': '"https://api.example.com"',
},
},
};
const config = configs[env as keyof typeof configs];
const result = await Bun.build({
entrypoints: ['./src/index.ts'],
outdir: './dist',
target: 'browser',
format: 'esm',
splitting: true,
...config,
});
if (!result.success) {
console.error('❌ Build failed');
process.exit(1);
}
console.log(`✅ ${env} build successful`);NODE_ENV=production bun run build-env.ts{
"scripts": {
"build": "bun run build.ts",
"build:dev": "NODE_ENV=development bun run build-env.ts",
"build:prod": "NODE_ENV=production bun run build-env.ts",
"build:watch": "bun run build.ts --watch",
"clean": "rm -rf dist"
}
}{
"type": "module",
"main": "./dist/cjs/index.js",
"module": "./dist/esm/index.js",
"types": "./dist/esm/index.d.ts",
"exports": {
".": {
"import": "./dist/esm/index.js",
"require": "./dist/cjs/index.js",
"types": "./dist/esm/index.d.ts"
}
},
"files": ["dist"]
}// build-lib-with-types.ts
import { $ } from 'bun';
// Build JavaScript
await Bun.build({
entrypoints: ['./src/index.ts'],
outdir: './dist',
target: 'node',
format: 'esm',
minify: true,
});
// Generate type declarations
await $`bunx tsc --declaration --emitDeclarationOnly --outDir dist`;
console.log('✅ Built library with type declarations');browsernodebunesmcjsiifeminify: true // Basic minification
minify: { // Granular control
whitespace: true,
identifiers: true,
syntax: true,
}externalinlinenone# 1. Check output directory
ls -lh dist/
# 2. Verify bundle size
du -sh dist/*
# 3. Test bundle
bun run dist/index.js
# 4. Check for errors
echo $? # Should be 0import { watch } from 'fs';
async function build() {
await Bun.build({
entrypoints: ['./src/index.ts'],
outdir: './dist',
minify: false,
});
}
await build();
watch('./src', { recursive: true }, async (event, filename) => {
if (filename?.endsWith('.ts')) {
console.log(`Rebuilding...`);
await build();
}
});loader: {
'.png': 'file', // Copy file, return path
'.svg': 'dataurl', // Inline as data URL
'.txt': 'text', // Inline as string
'.json': 'json', // Parse and inline
}if (!result.success) {
for (const log of result.logs) {
console.error(log);
}
}externalexternal: ['*'] // Exclude all node_modules
external: ['react'] // Exclude specific packages
external: [] // Bundle everything