<p align="center">
<img src="https://rawgit.com/egoist/tooling/master/media/logo.svg" alt="">
<br><strong>tooling</strong> is a universal <br>CLI for any front-end framework.
</p>
<br>
<p align="center"><a href="https://npmjs.com/package/tooling"><img src="https://img.shields.io/npm/v/tooling.svg?style=flat" alt="NPM version"></a> <a href="https://npmjs.com/package/tooling"><img src="https://img.shields.io/npm/dm/tooling.svg?style=flat" alt="NPM downloads"></a> <a href="https://circleci.com/gh/egoist/tooling"><img src="https://img.shields.io/circleci/project/egoist/tooling/master.svg?style=flat" alt="Build Status"></a> <a href="https://github.com/egoist/donate"><img src="https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat" alt="donate"></a></p>
## Install
Recommend to install `tooling` as devDependency in your project.
```bash
yarn add tooling --dev
```
Note that you can execute `./node_modules/.bin/tooling` via `yarn tooling`
## Getting started
First populate an entry file `index.js` in your project:
```js
setInterval(() => {
document.body.innerHTML = new Date()
}, 1000)
```
**Development mode:**
```bash
yarn tooling dev index.js
```
Then open `http://localhost:4000` and test it out yourself!
**Production mode: (minified and optimized)**
```bash
yarn tooling build index.js
```
Then you can deploy generated files in `./dist` folder.
**Build in library mode:**
Similar to production mode, but it generates a UMD format bundle:
```bash
yarn tooling build index.js --lib LibraryName
# then window.LibraryName will also be available
```
You may [exclude some modules](/docs/config.md#externals) from your library.
## What's inside?
### Babel
Babel with `babel-preset-latest` for transpiling ES2015+ code, you can override it by providing `.babelrc` in your project root.
### PostCSS
The Default postcss plugins only contain the `autoprefixer` with `browsers: ['ie > 8', 'last 4 versions']`, you can override it by providing `postcss.config.js` in your project root.
### Static folder
By default `./static/*` will be copied to `./dist/*`, thus all resource in the `./static` folder can be accessible via `http://localhost:4000/*`.
### Homepage
The `index.html` for homepage is generated by [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin), you can check out the default template we use at [lib/template.html](/lib/template.html), you can also populate a `template.html` in project root to override it. The title of homepage is inferred by this order if you have a `package.json`: `pkg.productName > pkg.title`, you can also set this via CLI options `--html.title <title>`, if none is present, it fallbacks to `Tooling App`.
## Config file
You can keep CLI options here, check out the [docs](/docs/config.md).
## Adapter
An adapter can mutate the webpack config tooling uses, it can use all options in config file and is often used to adapt specific framework like `react` and `vue`.
Check out the [docs](/docs/adapter.md) for adapter.
## List of adapters
- [vue](https://github.com/egoist/tooling-vue)
- [preact](https://github.com/egoist/tooling-preact)
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**tooling** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/tooling/contributors)).
> [egoistian.com](https://egoistian.com) · GitHub [@egoist](https://github.com/egoist) · Twitter [@rem_rin_rin](https://twitter.com/rem_rin_rin)