1.6.0 • Public • Published

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

    NPM version NPM downloads Build Status donate


    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 with babel-preset-latest for transpiling ES2015+ code, you can override it by providing .babelrc in your project root.


    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/*.


    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.


    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


    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


    tooling © egoist, Released under the MIT License.
    Authored and maintained by egoist with help from contributors (list). · GitHub @egoist · Twitter @rem_rin_rin




    npm i tooling

    DownloadsWeekly Downloads






    Last publish


    • kchan
    • rem