Add Bun bundler for frontend JavaScript

- Bundle all frontend JS with Bun.build() (82KB minified)
- Dependencies (motion, lenis, three) are now bundled instead of CDN
- Remove import map from index.html (no longer needed)
- Output to public/dist/app.bundle.js with source map
- Add public/dist/ to .gitignore (generated during build)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2025-12-16 14:33:03 -08:00
co-authored by Claude Opus 4.5
parent 31aa3f2127
commit 2fb61defca
3 changed files with 48 additions and 13 deletions
+1
View File
@@ -4,6 +4,7 @@ node_modules/
# Generated files
dist/*.zip
public/css/styles.css
public/dist/
# Build artifacts
*.log
+2 -12
View File
@@ -9,17 +9,7 @@
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
<!-- Import Maps for ES Module dependencies -->
<script type="importmap">
{
"imports": {
"lenis": "https://cdn.jsdelivr.net/npm/lenis@1.3.16/+esm",
"motion": "https://cdn.jsdelivr.net/npm/motion@12.23.26/+esm",
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"
}
}
</script>
</head>
</head>
<body class="min-h-screen overflow-x-hidden leading-relaxed">
<!-- Skip to main content link for keyboard users -->
<a href="#main-content" class="skip-link">Skip to main content</a>
@@ -324,6 +314,6 @@
</div>
</footer>
<script type="module" src="./app.js"></script>
<script type="module" src="./dist/app.bundle.js"></script>
</body>
</html>
+45 -1
View File
@@ -67,14 +67,58 @@ function buildTailwindCSS() {
}
}
/**
* Build frontend JavaScript bundle using Bun's bundler
*/
async function buildFrontendJS() {
const entrypoint = path.join(ROOT_DIR, 'public', 'app.js');
const outdir = path.join(ROOT_DIR, 'public', 'dist');
console.log('📦 Bundling frontend JavaScript...');
try {
const result = await Bun.build({
entrypoints: [entrypoint],
outdir: outdir,
target: 'browser',
format: 'esm',
minify: true,
sourcemap: 'linked',
naming: '[name].bundle.[ext]',
});
if (!result.success) {
console.error('Bundle failed:');
for (const log of result.logs) {
console.error(log);
}
process.exit(1);
}
// Find the main bundle output
const mainBundle = result.outputs.find(o => o.kind === 'entry-point');
if (mainBundle) {
const bundleName = path.basename(mainBundle.path);
const bundleSize = (mainBundle.size / 1024).toFixed(1);
console.log(`✓ Frontend JS bundled to public/dist/${bundleName} (${bundleSize} KB)\n`);
}
return result;
} catch (error) {
console.error('Failed to bundle frontend JS:', error.message);
process.exit(1);
}
}
/**
* Main build process
*/
async function build() {
console.log('🔨 Building cross-provider design plugins...\n');
// Build Tailwind CSS first
// Build frontend assets
buildTailwindCSS();
await buildFrontendJS();
// Read source files
const { commands, skills } = readSourceFiles(ROOT_DIR);