Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/knowankit/build-react-npm
⚡️A CLI tool for building react npm packages.
https://github.com/knowankit/build-react-npm
babel build-react-npm cli component react webpack
Last synced: 10 days ago
JSON representation
⚡️A CLI tool for building react npm packages.
- Host: GitHub
- URL: https://github.com/knowankit/build-react-npm
- Owner: knowankit
- License: mit
- Created: 2021-09-17T01:27:48.000Z (about 3 years ago)
- Default Branch: develop
- Last Pushed: 2023-01-08T03:42:45.000Z (almost 2 years ago)
- Last Synced: 2024-04-23T15:02:24.858Z (7 months ago)
- Topics: babel, build-react-npm, cli, component, react, webpack
- Language: JavaScript
- Homepage:
- Size: 11.5 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📦 build-react-npm
> CLI for creating reusable, modern React libraries using **Webpack** and **create-react-app**.
## Intro
## Features 🚀
- A modern and easy to use CLI
- Rapid development of the component
- Generates modern JS feature files
- [create-react-app](https://github.com/facebookincubator/create-react-app) for example usage and local dev
- [Webpack](https://webpack.js.org/) for bundling
- [Babel](https://babeljs.io/) 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
## How is it different from the other library CLI?
- 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 pack` to test in our local environment
## Install globally
```bash
npm install -g build-react-npm
```
or
```bash
npx build-react-npm
```
## Development
```bash
build-react-npm
```
Once 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`
```bash
npm run dev
```
else
```bash
yarn dev
```
You will have a example component running in the browser. You can start developing your component here by adding some Javscript and CSS.
## Test
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
```bash
yarn build
```
or
```bash
npm run build
```
This 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.
```bash
npm install
```
This will install your package and you can test it in in your local project before publishing.
## Publish
Once you have tested your component, you can go the root directory and run
```bash
npm publish
```
If you want to create the demo page as well using the git hub page then you can style your example directory and run
```bash
npm run deploy
```
Congratlations 🎉, you have published your package
## Libraries bootstrapped from this CLI - build-react-npm
* [React bubble effect button](https://github.com/knowankit/react-bubbly-effect-button)
* [Particle effect on text](https://github.com/knowankit/particle-text-effect)
## License
MIT © [Ankit Kumar](https://github.com/knowankit)
Support my OSS work by following me on twitter 