shikaka

Q: Do you want to bundle your UI components as easy as possible? A: Shikaka!

Features

• Fast, zero-config by default.
• It cares about Tree-Shaking (Rollup), Minification (Terser), Autoprefixing (PostCSS) and Polyfilling (Babel).
• Built-in support for CSS Modules in SASS, LESS or CSS.
• Works with Typescript and React.
• Creates multiple optimized entry points.

This tool is built as an alternative to webpack or rollup. We don't bundle node_modules or supporting every project requirement. The output by this library is intented to use in a modern module bundler like Parcel or Webpack. This tool was created due to the frustration of bundling React components with good defaults and first-class CSS Modules support.

Example

Multiple entry points

It operates on a fixed directory structure like:

$ shikaka src/index.js

your-library
└── src
    ├── components
    │   └── Button
    │       ├── index.js
    │       └── index.module.css
    └── index.js

and produces by default this:

dist
├── Button.js
├── index.js
├── Modal.js
└── styles.css

consumable:

import { Button } from 'your-module' // or
import Button from 'your-module/dist/Button'

Single entry point

You can also just pass a single entry point without having a components directory.

$ shikaka src/index.js

your-library
└── src
    └── index.js

It produces this:

dist
└── index.js

consumable:

import MyHook from 'your-module'

Installation & Setup

1. Install by running: npm i -D shikaka
2. Set up your package.json:

{
  "name": "foo",                  // your package name
  "source": "src/index.js",       // your source code
  "main": "dist/cjs/index.js",    // for CommonJS/Node bundle
  "module": "dist/es/index.js",   // for ESM bundle
  "types": "dist/index.d.ts"      // when you use TS
  "scripts": {
    "build": "shikaka src/index.js --format cjs --format es" // by default only ESM
  },
  "browserslist": [             // your supported browsers (used to configure babel and postcss)
    "defaults",
    "not ie 11",
    "not IE_Mob 11"
  ],
}

TypeScript

We automatically use rollup-plugin-typescript2 when the entry file ends with .ts extension, however you have to install rollup-plugin-typescript2 alongside typescript to make it work.

Help

shikaka -h

Development

Installation

yarn install

Tests

If you change the code, update the tests and run:

yarn test

Storybook

Test a library fixture output as it would be your real library with Storybook.

node cli.js src/index.js --out-dir test/fixtures/library/dist --root-dir test/fixtures/library
yarn storybook

Alternatives

• create-react-library As the name suggest, it's like create-react-app but for libraries. The difference between Shikaka is that it produce a complete library template and relies directly on the build tools like rollup and babel. Shikaka was only build to bundle your library with good defaults so you can publish your library without worrying about size and compatibility.

Inspired by

• bili - Bili makes it easier to bundle JavaScript libraries.
• microbundle - Zero-configuration bundler for tiny modules.