https://github.com/thatisuday/quick-library
A CLI tool to generate React, Angular, Vue library (React for now)
https://github.com/thatisuday/quick-library
angular angular4 cli library react reactjs vue vuejs
Last synced: 2 months ago
JSON representation
A CLI tool to generate React, Angular, Vue library (React for now)
- Host: GitHub
- URL: https://github.com/thatisuday/quick-library
- Owner: thatisuday
- Created: 2019-02-14T09:13:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-16T16:38:09.000Z (over 7 years ago)
- Last Synced: 2025-02-17T04:38:07.561Z (over 1 year ago)
- Topics: angular, angular4, cli, library, react, reactjs, vue, vuejs
- Language: JavaScript
- Homepage: https://medium.com/@thatisuday/creating-react-angular-vue-library-with-ease-19c799b17f90
- Size: 237 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quick Library
A CLI tool to generate React, Angular and Vue library and publish it on npm.
[](https://www.npmjs.com/package/quick-library)
[](https://www.npmjs.com/package/quick-library)
[](https://www.npmjs.com/package/quick-library)
> Right now, this tool only supports creation of React library. I am working on others.
## Install CLI tool
```
npm install --global quick-library
```
Use `quick-library --help` to see command line options.
```bash
$ quick-library --help
Usage: quick-library [options]
Options:
-v, --version output the version number
--no-install Do not install npm dependencies
--no-git Do not initialize git repository
-h, --help output usage information
```
## Create new library
Use command `quick-library` which will prompt some options for library configuration. You can also provide `--no-install` flag to prevent installation of npm packages as wll as `--no-git` flag to prevent initialization of `git` repository.
```
$ quick-library
? Enter library name new-react-lib
? Enter library description library description
? Select a library template React
? Include CSS in JavaScript bundle? No, extract to another file?
? Select git reposiory host GitHub
? Enter github username thatisuday
? Enter GitHub repository name new-react-lib
✔ Initialized git repository new-react-lib
➤ Installing npm packages
```
## Start developing your library
Once library is created, you will be shown following instructions.
```bash
Congratulations, new-react-lib library has been created.
Use bellow commands to start working on your project.
$ cd new-react-lib/ ‣ enter directory
$ npm run start ‣ start build and watch
$ npm run start:demo ‣ start demo server
$ npm publish ‣ publish library
```
Once you enter the library directory, you have following files to work with
```
new-react-lib
├── babel.config.js
├── demo
| ├── index.html
| ├── index.js
| └── webpack.config.js
├── dist
| ├── index.js
| └── index.js.map
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
| ├── MyComponent.js
| ├── index.js
| └── styles.scss
└── webpack.config.js
```
Open terminal window and use command `npm run start` start webpack build which will watch file changes in `src` and output to `dist`. At the same time, use command `npm run start:demo` which will watch files from `demo/` directory and run preview in browser.
## Publish your library
Once you are done with your development, `dist` directory contains your release ready library files. You can use `npm publish` command to publish your library to `npm` official registry.
## Using your library
Once you publish your library, people can install your library using below command
```bash
npm install --save library-name
```
You should only import named components like for example, in React library, a component can be imported like
```jsx
import { MyComponent } from 'library-name';
const App = (props) => ;
```
If you have opted for **Include CSS in JavaScript bundle** command line option while creating the library, then library users don't have to worry about importing css separately. But if you had extracted css to different file, then library users must include css either by importing in their JavaScript like `import 'library-name/styles.css';` or in their sass like `@import '~library-name/styles.css';`
***
# Contribute to this tool
I have managed to create `React` template but I need help with `Angular` and `Vue` to integrate these templates in this tool. Fork this repository and give merge request in you have worked on it.