Need help with klap?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

osdevisnot
140 Stars 4 Forks MIT License 217 Commits 14 Opened issues

Description

zero config, zero dependency bundler for tiny javascript packages

Services available

!
?

Need anything else?

Contributors list

# 110,378
React
GraphQL
Webpack
Go
181 commits
# 76,465
Sass
Kotlin
esmodul...
yarn
1 commit
# 37,836
React
Three.j...
nodejs-...
postpro...
1 commit

klap :clap:

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

Build Status David David npm NPM<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> All Contributors <!-- ALL-CONTRIBUTORS-BADGE:END --> <!-- prettier-ignore-end -->

klap output

: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

:platewithcutlery: 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, also applies to
esm
and
umd
outputs.

Then use

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

See examples for common use cases using

klap
.

:anger: 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
| |
cjs
| -c --cjs | the output file for common js format | pkg.main | |
esm
| -e --esm | the output file for esm format | pkg.module | |
umd
| -u --umd | the output file for umd format | pkg.browser | |
types
| -t --types | the output file for type definitions | pkg.types | |
browserslist
| -b --browserslist | browserslist compatible compilation target |
last 2 versions modern browsers if usage is greater than 1%
| |
klap.name
| -n --name | package name for
umd
bundles | sanitized
pkg.name
| |
klap.port
| -p --port | port for development server |
1234
| |
klap.example
| --example | location of index js/ts file for start command |
public/index.js
or
pkg.source
| |
klap.fallback
| --fallback | location of index html file for start command |
public/index.html
| |
klap.target
| --target | target for development server (
umd, es
) |
es
| |
klap.sourcemap
| --no-sourcemap | sourcemaps for builds |
true
| |
klap.minify
| --no-minify | minification for builds |
true
| |
klap.runtime
| --runtime | the runtime for new JSX transform |
react
| |
klap.globals
| | global names for umd bundles |
{}
|

: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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.