klap 👏

a zero config, zero dependency bundler for tiny javascript packages.

✨ Features

🎉 zero config: bundle your library using only a package.json
💥 zero config: typescript support (just rename *.js to *.ts)
🌟 zero config: code transforms using babel macros
🚀 zero dependency: uses gcc-style bundling.
🐙 creates tiny bundles for multiple output formats cjs, esm and umd
🔥 Modern JS syntax with class properties, async/await, and generators
⚡ Built in Minification and Gzip Size Tracking
🌀 Built in development server for quick prototyping.
🎊 Supports react and styled-components out of the box.

💪 Powered By

rollup - Next-generation ES module bundler
babel - The compiler for next generation JavaScript

🍽️ Usage

First, initialize your project using klap init:

npx klap init

Prefer Typescript ? initialize using ts argument:

npx klap init ts

Want to use JSX with Typescript? init using tsx argument:

npx klap init tsx

The init command will create a minimal package.json with source, main, module and browser entries and the build, watch and start scripts.

{
  "name": "...",
  "version": "0.0.0",
  "files": [ "dist" ],
  "source": "src/sum.js",         # source file of your package
  "main": "dist/sum.cjs.js",      # commonjs bundle target
  "module": "dist/sum.esm.js",    # esm bundle target
  "browser": "dist/sum.js",       # umd bundle target
  "scripts": {
    "build": "klap build",        # bundle your package
    "watch": "klap watch",        # bundle your package and watch for changes
    "start": "klap start",        # start a development server
  },
  "devDependencies": {
    "klap": "3.2.0"               # klap as dev dependency
  }
}

Note: Dropping pkg.main will disable cjs output. This also applies to esm and umd as well.

Then use npm run or yarn to invoke npm scripts as you normally would.

💢 Granular Control

klap uses sensible defaults for most part. However, as needed, use below properties in package.json to fine tune klap. You can also use cli flags to control config options for klap.

option	cli flag(s)	description	default
`source`	-s --source	source file to compile and bundle	`src/index.js`
`browserslist`	-b --browserlist	browserlist compatible compilation target	`>1%, not ie 11, not op_mini all`
`klap.name`	-n --name	package name for `umd` bundles	sanitized `pkg.name`
`klap.port`	-p --port	port for development server	`1234`
`klap.example`	-e --example	location of index js/ts file for start command	`public/index.js` or `pkg.source`
`klap.fallback`	-f --fallback	location of index html file for start command	`public/index.html`
`klap.target`	-t --target	target for development server (`umd	es`)
`klap.sourcemap`	--no-sourcemap	sourcemaps for builds	`true`
`klap.minify`	--no-minify	minification for builds	`true`
`klap.globals`		global names for umd bundles	`{}`
`klap.namedExports`		named exports for commonjs modules	`{}`