Q: Do you want to bundle your UI components as easy as possible? A: Shikaka!
CSS Modules
in SASS
, LESS
or CSS
.This tool is not 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.
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'
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'
npm i -D shikaka
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"
],
}
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.
shikaka -h
yarn install
If you change the code, update the tests and run:
yarn test
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