klap :clap:

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

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> <!-- ALL-CONTRIBUTORS-BADGE:END --> <!-- prettier-ignore-end -->

:sparkles: Features

• :tada: zero config: bundle your library using only a

  package.json

• :boom: zero config: typescript support (just rename

  *.js

  to

  *.ts

  )
• :star2: zero config: code transforms using babel macros
• :rainbow: zero config: code generation using babel plugin codegen
• :rocket: zero dependency: uses gcc-style bundling.
• :octopus: creates tiny bundles for multiple output formats

  cjs

  ,

  esm

  and

  umd

• :fire: Modern JS syntax with class properties, async/await, and generators
• :zap: Built in Minification and Gzip Size Tracking
• :cyclone: Built in development server for quick prototyping.
• :confetti_ball: Supports

  react

  ,

  styled-components

  and

  emotion

  out of the box.

:muscle: Powered By

• rollup - Next-generation ES module bundler
• babel - The compiler for next generation JavaScript
• typescript - Typed JavaScript at Any Scale.

:platewithcutlery: Usage

First, initialize your project using

klap init

npx klap init

Prefer Typescript ? initialize using

ts

npx klap init ts

Want to use JSX with Typescript?

init

tsx

npx klap init tsx

The

init

package.json

source

main

module

browser

build

watch

start

{
  "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, also applies to

esm

and

umd

outputs.

Then use

npm run

yarn

See examples for common use cases using

klap

.

:anger: Granular Control

klap

package.json

klap

cli flags

klap

| option | cli flag(s) | description | default | | ----------------- | ---------------------- | ---------------------------------------------- | ------------------------------------------------------------- | |

source

src/index.js

cjs

esm

umd

types

browserslist

last 2 versions modern browsers if usage is greater than 1%

klap.name

umd

pkg.name

klap.port

1234

klap.example

public/index.js

pkg.source

klap.fallback

public/index.html

klap.target

umd, es

es

klap.sourcemap

true

klap.minify

true

klap.runtime

react

klap.pragma

react

klap.pragmaFrag

react

klap.usets

false

klap.globals

{}

--usets

allows the library code to use typescript features not supported by

@babel/preset-typescript

. See const-enums example to enable usage of const enums.

:clinking_glasses: License

klap is licensed under the MIT License.

Documentation is licensed under Creative Common License.

Created with ❤️ by @osdevisnot and all contributors.

:sparkles: Contributors

Thanks goes to these wonderful people (emoji key):

v 1 r t l 💻

Daniel Berner 💻

Tom Julius 💻

Marcus Lindblom 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

:gift_heart: Supporters

• JetBrains has been kind enough to support

  klap

  with an open source license.