bunchee

🥈Silver

Bunchee is a zero-config bundler for npm packages that simplifies the bundling process for JavaScript and TypeScript projects. It benefits developers by automating the bundling of CommonJS and ES modules, including JSX and React Server Components. Bunchee integrates into existing workflows and connects to npm packages, reducing setup time and complexity.

1,389360Updated 2mo ago

Intermediate30min to implementautomation

Saves ~30 min per use

Quick InstallView Source

git clone https://github.com/huozhi/bunchee.git

Works with:

Claude

Overview

About This Skill

https://github.com/huozhi/bunchee

How to Use

["Install Bunchee globally or as a dev dependency: `npm install -D bunchee` or `pnpm add -D bunchee`.","Run the bundler in your project root: `bunchee` for default settings or `bunchee --out-dir ./dist --format cjs,esm` to customize output.","For TypeScript/JSX projects, ensure your `tsconfig.json` or `jsconfig.json` is properly configured (e.g., `\"jsx\": \"react-jsx\"`).","Verify the output in the specified directory and check the bundle size using tools like `bundlephobia` or `webpack-bundle-analyzer`.","Integrate into CI/CD by adding a build step (e.g., `bunchee && npm publish`) to automate package publishing."]

Use Cases

Easily bundle a TypeScript library with minimal configuration.

Automatically generate exports for multiple files using wildcard patterns.

Build React Server Components with proper chunk separation for client and server.

Create executable binaries from TypeScript files with simple directory structure.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/huozhi/bunchee

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Use Bunchee to bundle the [PROJECT_NAME] package located in [PROJECT_PATH]. Ensure the output includes both CommonJS and ES module formats in the [OUTPUT_DIR]. Include support for [JSX/TSX/React Server Components] if applicable. Verify the bundle size and generate a summary of the bundled files with their respective sizes.

Example Output

Successfully bundled **@acme/ui-components@1.2.0** from `/projects/ui-components` using Bunchee. The output was generated in `/dist` with the following files:

- **dist/index.cjs.js** (CommonJS): 42.3 KB (minified: 18.7 KB)
- **dist/index.esm.js** (ES Module): 38.9 KB (minified: 16.2 KB)
- **dist/index.d.ts** (TypeScript declarations): 2.1 KB

The bundle includes support for React Server Components and JSX. Tree-shaking removed 12 unused exports, reducing the final size by 15%. All dependencies (e.g., `react@^18.2.0`, `lodash-es@^4.17.21`) were bundled inline. The build completed in **1.8s** with zero configuration. No errors or warnings were detected during the process.