Natural Preference for Minification
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    frontwerkpublic

    Frontwerk

    Frontwerk

    CLI toolbox for common scripts for frontend projects that includes:

    Coming soon:


    The problem

    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.

    This solution

    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).

    Inspiration

    This is heavily inspired by kcd-scripts by the amazing Kent C. Dodds (you should definitely follow him on Twitter by the way) and react-scripts.

    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

    This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

    npm install --save-dev frontwerk

    or with yarn:

    yarn add --dev frontwerk

    Usage

    This is a CLI and exposes a bin called frontwerk. You can run

    frontwerk

    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 package.json scripts property to include the scripts you want to use:

    {
      "scripts": {
        "lint:js": "frontwerk lint",
        "lint:css": "frontwerk stylelint",
        "test": "frontwerk test --no-watch",
        "test:watch": "frontwerk test",
        "build": "frontwerk build",
        "format": "frontwerk format"
      }
    }

    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

    {
      "extends": "./node_modules/frontwerk/eslint.js",
      "rules": {}
    }

    or, simply start with your own config to pass to ESLint:

    {
      "extends": "google"
    }

    Note that eslintignore is coincidentally ignored, so until this issue is resolved, please pass the eslint ignore as allowed by eslint's configuration.

    Documentation

    You can find more extensive documentation about each tool on the website.

    LICENSE

    MIT

    install

    npm i frontwerk

    Downloadslast 7 days

    12

    version

    1.1.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar