CLI for creating reusable, modern React libraries using Webpack and create-react-app.
- A modern and easy to use CLI
- Rapid development of the component
- Generates modern JS feature files
- create-react-app for example usage and local dev
- Webpack for bundling
- Babel for transpiling
- Optional support for TypeScript
- Sourcemap creation
- Publish github pages with one command
- Easy to build and test your component with the example template
- It is using latest version of webpack. Currently, other CLI's are using rollup.
- Development is fast here because we are not directly consuming the component. First we are building it peacefully, and once it is ready then we do
npm packto test in our local environment
npm install -g build-react-npmor
npx build-react-npmbuild-react-npmOnce you run the CLI, you will be asked to answer few questions. Complete the steps and you should have a react project with an example component.
If you are using npm
npm run develse
yarn devYou will have a example component running in the browser. You can start developing your component here by adding some Javscript and CSS.
Looks like you have build your awesome react component. Now, we need to test it as an individual component by importing it. To do this first we need to build our component.
To build the component run
yarn buildor
npm run buildThis will build the file and also pack you npm package in the format of tgz. You can see a new file has been created with the name of your package at the root level. Something like [name-of-package-version-number].tgz This file will be used in our example dir where we will be testing.
Go to the example directory and check the package.json, you will see your package name in the dependency. You need to change it as per your package name or just rename whatever it is in the [name-of-package-version-number].tgz filename.
npm installThis will install your package and you can test it in in your local project before publishing.
Once you have tested your component, you can go the root directory and run
npm publishIf you want to create the demo page as well using the git hub page then you can style your example directory and run
npm run deployCongratlations 🎉, you have published your package
MIT © Ankit Kumar
Support my OSS work by following me on twitter
