whys-scripts
Consistent JavaScript tooling on many projects with ease.
Last updated an hour ago by simonmares .
MIT · Original npm · Tarball · package.json
$ cnpm install whys-scripts 
SYNC missed versions from official npm registry.

Whys scripts

Consistent JavaScript tooling on many projects with ease.

What is not easy:

  • inconsistent file patterns for all the tools
  • tackling compatible package versions (if a tool is composed from many)
  • installing and setting up "devDependencies" for each project
  • tooling decisions made on each project
  • consistent tooling between projects

Get started

# add or upgrade
yarn add --dev whys-scripts
# initialize/update config in package.json
whys-scripts init

Running the init script and following our conventions you get:

  • immediate linting and formatting in an editor (it exports config files)
  • prepared CI for lint/format/test
  • an option to use most of the scripts in CI or on command line

Configuration in package.json

field src (array)

Specify your source files.

Examples:

  • "pages/**/*.js": whole tree of files with .js extension in pages directory of package root
  • "*.js": files with .js extension in package root
  • "!src/templates/**/*.js": excludes files with .js extension in the subdirectory tree
  • "!**/__generated__/**": to exclude relay-generated files (they are generated next to source)

Usage:

{
  "whys-scripts": {
    "src": ["pages/*.js", "components/*.js"]
  }
}

field tests (array)

Specify how to find test files. Example below shows defaults.

Usage:

{
  "whys-scripts": {
    "tests": ["src/**/*.test.js", "tests/**/*.js"]
  }
}

field projectType (enum)

Its used to determine which configs to use. Project type can be one of these values:

  • react-application (default when whys-scripts init is run)
  • react-library
  • node-library
{
  "whys-scripts": {
    "projectType": "react-application"
  }
}

field enable

Its an object used to enable flags.

Possible flags:

  • typescript enables TypeScript
{
  "whys-scripts": {
    "enable": { "typescript": true }
  }
}

script init

npx whys-scripts init

Updates your npm project to use whys-scripts. It adds default config for the whys-scripts field in package.json. Config dot files are copied to your project root.

script format

npx whys-scripts format

Formats the source code. Mostly based on airbnb styleguide.

script format-check

npx whys-scripts format-check

Checks all the source code was formatted.

script lint

npx whys-scripts lint

Runs eslint on the source code. There are no formatting rules and a few stylistic rules as warnings.

To fix problems you can run:

npx whys-scripts lint --changed --fix

strict version

npx whys-scripts lint --strict

The script will treat warnings as errors. It will exit with non-zero status code on any warning.

script test

npx whys-scripts test

Tests your react app or library with jest.

You can run tests in watch mode: test --watch. To create coverage report, run: test --coverage.

script export-eslint-config

npx whys-scripts export-eslint-config

Creates .eslintrc.js file in your project root. It copies configuration that is used in the lint script. This should enable linting directly in your editor.

script export-prettier-config

npx whys-scripts export-prettier-config

Creates .prettierrc.js file in your project root. It copies configuration that is used in the format script. This should enable correct formatting directly in your editor.

Guides

enable TypeScript

To use TypeScript on a new project, run:

npx whys-scripts init --typescript

To use TypeScript on an existing project, run:

npx whys-scripts init --typescript --write

It should update whys-scripts field in package.json with:

{
  "whys-scripts": {
    "enable": {
      "typescript": true
    }
  }
}

also update src and tests to match ts and tsx files:

{
  "whys-scripts": {
    "src": ["src/**/*.{ts,tsx}"],
    "tests": ["src/**/*.test.{ts,tsx}"]
  }
}

usage in monorepo

There is no problem using whys-scripts in a monorepo. We only have more options. For example we can run tests for a single package or run all tests in all packages of the monorepo. It applies to linting and formatting as well.

Lets have packages in standard packages directory.

test one package

In <ROOT>/packages/a/package.json of the package:

{
  "whys-scripts": {
    "src": ["src/**/*.{ts,tsx}"],
    "tests": ["src/**/*.test.{ts,tsx}"]
  }
}

Now you can run npx whys-scripts test from <ROOT>/packages/a to run only tests of the package.

test all packages

In package.json of repository root:

{
  "whys-scripts": {
    "src": ["packages/*/src/**/*.{ts,tsx}"],
    "tests": ["packages/*/src/**/*.test.{ts,tsx}"]
  }
}

Now you can run npx whys-scripts test from <ROOT> to run all tests in the monorepo.

Notes:

  • just make sure to install only one version of whys-scripts for all packages and for the root package

storybook scripts

export-storybook-config

npx whys-scripts export-storybook-config

Copies an opinionated .storybook config directory in your project root.

run-storybook and build-storybook

Runs or exports storybook without installing packages or configuring the storybook.

npx whys-scripts run-storybook
npx whys-scripts build-storybook

Script build-storybook exports the static files to directory <ROOT>/exported-storybook.

Running checks on staged/changed files

Its useful to check files before committing them e.g. with git hooks.

Recommended usage with --staged flag:

  • lint --staged
  • format --staged --add: format only staged files (can't be partially staged) and stage them again with git add

these scripts can be also used with --changed flag:

  • lint --changed
  • format --changed
  • format-check --changed

A file is considered changed if its latest commit is not on origin/master or changes are not committed.

In other words:

  • this is conventional and cannot be configured
  • expects remote to be origin
  • expects main branch to be master

Conventions

You don't have to follow these conventions in order to use whys-scripts. However to achieve consistency between projects and to have little to no configuration its recommended.

test file's name ends with .test.js

Because if you name it file_test.js instead of file.test.js, editors tokenize it as one word. That leads to no autocomplete, its harder to navigate a cursor within the name and harder to rename the file.

source code is in src directory relative to package.json

It makes integration with whys-scripts easier (and other tools as well) because we know everything in directory tree from src is source code, unless specified otherwise.

Compatibility table

This package should work with other toolkits alongside, but sometimes if same packages are installed, it might not. This table documents tested versions of such toolkits.

version razzle
whys-scripts 1.x ^0.8.14
whys-scripts 2.x ^3.0.0

experimental scripts

These scripts are not finished and will likely change. Do not depend on them.

  • init-flow adds flow to your project
  • init-git-hooks creates git hooks from npm scripts of same name
  • bundle to bundle library to single UMD file
  • compile to compile library files to UMD files
  • changelog updates CHANGELOG.md file from git history, concisely

Current Tags

  • 2.0.0-beta.6                                ...           beta (6 months ago)
  • 3.3.0                                ...           latest (an hour ago)
  • 1.5.3                                ...           next (a year ago)

49 Versions

  • 3.3.0                                ...           an hour ago
  • 3.2.0                                ...           14 days ago
  • 3.1.0                                ...           15 days ago
  • 3.0.0                                ...           a month ago
  • 2.3.1                                ...           5 months ago
  • 2.2.0                                ...           6 months ago
  • 2.1.0                                ...           6 months ago
  • 2.0.3                                ...           6 months ago
  • 2.0.2                                ...           6 months ago
  • 2.0.1                                ...           6 months ago
  • 2.0.0                                ...           6 months ago
  • 2.0.0-beta.6                                ...           6 months ago
  • 2.0.0-beta.5                                ...           7 months ago
  • 2.0.0-beta.4                                ...           7 months ago
  • 2.0.0-beta.3                                ...           7 months ago
  • 2.0.0-beta.2                                ...           8 months ago
  • 2.0.0-beta.1                                ...           8 months ago
  • 2.0.0-beta.0                                ...           8 months ago
  • 1.15.0                                ...           9 months ago
  • 1.14.1                                ...           9 months ago
  • 1.14.0                                ...           9 months ago
  • 1.13.0                                ...           10 months ago
  • 1.12.0                                ...           10 months ago
  • 1.11.5                                ...           10 months ago
  • 1.11.4                                ...           10 months ago
  • 1.11.3                                ...           10 months ago
  • 1.11.2                                ...           10 months ago
  • 1.11.1                                ...           10 months ago
  • 1.11.0                                ...           10 months ago
  • 1.8.0                                ...           a year ago
  • 1.7.1                                ...           a year ago
  • 1.7.0                                ...           a year ago
  • 1.6.1                                ...           a year ago
  • 1.6.0                                ...           a year ago
  • 1.5.3                                ...           a year ago
  • 1.5.2                                ...           a year ago
  • 1.5.1                                ...           a year ago
  • 1.5.0                                ...           a year ago
  • 1.4.0                                ...           a year ago
  • 1.3.1                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.2.2                                ...           2 years ago
  • 1.2.0                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 1
This Week 15
This Month 103
Last Day 14
Last Week 3
Last Month 69
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |