Examples
Copy-and-paste starter projects for common library setups with Packem
Examples
Each example is a complete, working project you can use as a starting point. Pick the one closest to what you are building.
Library starters
| Example | What it builds |
|---|---|
| Basic TypeScript Library | A simple utility package with ESM output and .d.ts declarations |
| TypeScript Library | A TypeScript library with ESM + CJS output and declarations |
| JavaScript Package | A modern, zero-config JavaScript package |
| Dual Package (ESM + CJS) | A library that ships both ESM and CJS for maximum compatibility |
| CLI Tool | A package with bin executables and auto hashbang insertion |
| Multiple Exports | Multiple entry points via package.json#exports subpaths |
| React Component Library | React components with CSS Modules, Server Components, and Storybook |
| Monorepo | Multiple packages in a single workspace with shared configuration |
Transformers
| Example | What it covers |
|---|---|
| esbuild | Fast bundling with the esbuild transformer |
| swc | Rust-powered compilation with swc (decorators, legacy TS) |
| OXC | The experimental next-generation OXC toolchain |
| sucrase | Lightweight, fast alternative to Babel |
CSS
| Example | What it covers |
|---|---|
| Basic CSS | Plain CSS with PostCSS, injection and extraction |
| Sass/SCSS | Sass preprocessing with variables and mixins |
| Less | Less compilation |
| Stylus | Stylus preprocessing |
| CSS Modules | Scoped class names with automatic CSS Modules |
| PostCSS | Advanced PostCSS configuration with plugins |
| Lightning CSS | Fast CSS processing/minification with Lightning CSS |
React
| Example | What it covers |
|---|---|
| React Library | A React component library with TypeScript |
| CSS Modules | React components with scoped CSS Modules |
| Server Components | RSC and client components with directive handling |
| Tailwind CSS | React components with Tailwind CSS via PostCSS |
Configuration recipes
| Example | What it covers |
|---|---|
| Extra Conditions | Custom export conditions in package.json validation |
| Bundle Size Limits | Bundle size validation and per-file limits |
| Package.json Validation | Full package.json field validation setup |
| Dependency Validation | Detect unused, hoisted, and duplicated dependencies |
Advanced
| Example | What it covers |
|---|---|
| Multi-Runtime | Conditional exports for node, browser, edge, and react-server |
| Dynamic Imports | Code splitting via dynamic import() |
| Shared Modules | Shared chunks between bundles |
| WebAssembly | Bundling .wasm modules |
| Custom Plugins | Adding custom Rollup plugins via the plugins option |
| Bundle Analysis | Visualize and analyze bundle size |
| Minify HTML Literals | Automatically minify HTML and CSS inside template literals |
| require-cjs-transformer | Transform ESM imports of CJS packages for better runtime performance |
Quick start
Copy one of these to bootstrap a new project:
# TypeScript library
npx degit visulima/packem/examples/basic-library my-lib
cd my-lib && npm install && npm run build
# React component library
npx degit visulima/packem/examples/react-library my-components
cd my-components && npm install && npm run build