CLI toolbox for common scripts for frontend projects that includes:
- JS linting with ESLint
- JS testing with Jest
- JS formatting with Prettier
- CSS/SCSS linting with Stylelint
- Compile your JS with Babel
- Build your JS with Rollup
- Build your app with Webpack
Working on multiple frontend projects where you need to set up the same tools and processes and then maintain them across all of them is a tideous job.
Frontwerk is a CLI that abstracts away all those processes and configuration and exposes the same API that you can use across all your projects.
You can pick and choose which tools to use (i.e. if you don't want to format your JS with prettier, you don't have to).
So why not just use
kcd-scripts? You absolutely should! We're not in a
zero-sum game here. I basically wanted to learn how he created everything
without even knowing I'd get this far!
Installation and usage
npm install --save-dev frontwerk
or with yarn:
yarn add --dev frontwerk
This is a CLI and exposes a bin called
frontwerk. You can run
with no arguments to show a list of available commands. Or simply checkout the
src/scripts directory for all the available scripts.
Then simply ammend your
scripts property to include the scripts
you want to use:
Overriding the configuration
Although it works out of the box, Frontwerk allows you to specify your own config for the various scripts, either by extending the config provided or just by using your own, depending on the script. Frontwerk respects the convention used by each of its underlying tools (eslint, stylelint, etc.). Basically, if it's possible with that tool, it's possible with frontwerk.
Example with ESLint
or, simply start with your own config to pass to ESLint:
You can find more extensive documentation about each tool on the website.