tooling

tooling is a universal
CLI for any front-end framework.

Install

Recommend to install tooling as devDependency in your project.

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:

setInterval(() => {
  document.body.innerHTML = new Date()
}, 1000)

Development mode:

yarn tooling dev index.js

Then open http://localhost:4000 and test it out yourself!

Production mode: (minified and optimized)

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:

yarn tooling build index.js --lib LibraryName
# then window.LibraryName will also be available

You may exclude some modules 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, you can check out the default template we use at 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.

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 for adapter.

List of adapters

• vue
• 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, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @rem_rin_rin