@arters/web-scripts NPM

web-scripts

Description

Build, lint, test, format, and release your React App or JS library. This CLI tool bundles all the necessary configuration and dependencies so you can focus on the code.

Usage

npm i @arters/web-scripts husky --save-dev

Add the scripts and commit hooks to your package.json:

{
  "scripts": {
    "test": "web-scripts test",
    "lint": "web-scripts lint",
    "start": "web-scripts dev:spa",
    "build": "web-scripts build:[options]",
    "commit": "web-scripts commit",
    "release": "web-scripts release"
  },
  "husky": {
    "hooks": {
      "commit-msg": "web-scripts commitmsg",
      "pre-commit": "web-scripts precommit"
    }
  }
}

If you plan to use web-scripts build to build ESM, CommonJS, and types for your library with ease, update your package.json to define the locations where those will end up. Read more about our the build script.

{
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "types"
}

Editor support steps

Add a root .prettierrc.js:

module.exports = require('@arters/web-scripts/config/prettier.config.js')

Add a root .eslintrc.js:

module.exports = require('@arters/web-scripts/config/eslintrc.js')

Add a root jest.config.js:

module.exports = require('@arters/web-scripts/config/jest.config.js')

Watchers

Both web-scripts build:[options] and web-scripts test support a --watch flag which runs the underlying CLIs (tsc and jest) as watchers.

# re-compile the cjs, esm, and types on each change to your src with tsc
web-scripts build --watch

# re-run the tests that are relevant to your file changes with jest
web-scripts test --watch

The `build` script

web-scripts build runs three parallel calls to the TypeScript compiler.

One of them transpiles the files as CommonJS and outputs it to the cjs directory. Your repo should have "cjs/index.js" set as main in your package.json. You can turn this off using --no-cjs when running build.
Another does the exact same thing but only transpiles to EcmaScript modules. This is super helpful if your consuming project is using Babel or TypeScript, and you'll end up avoiding playing games of transpilation telephone along the way. Your repo should have "esm/index.js" set as module in your package.json if using this. You can turn this off with the --no-esm flag when running build.
Finally, tsc will be run to output type definitions. Your repo should have the "types" directory set as types in your package.json if using this. You can turn this off with the --no-types flag when running build.

These parallel builds are set up to share resources and work efficiently.

If you need to use Babel for some reason, that's ok! Simply use babel directly instead of using web-scripts build. Teams inside Spotify mix and match which scripts they use to serve their needs. In many cases, tsc is all you need and is lighter and simpler to set up.