@billogram/billo-scripts-frontend NPM

@billogram/billo-scripts-frontend

Scripts for building and maintaining TypeScript-based frontend libraries

Install

yarn add @billogram/billo-scripts-frontend

Usage

Add the following scripts to package.json if you are using the Rollup toolchain.

{
  "scripts": {
    "build": "billo-scripts-frontend build",
    "test": "billo-scripts-frontend test",
    "css:lint": "billo-scripts-frontend css-lint",
    "ts:check": "billo-scripts-frontend ts-check",
    "ts:compile": "billo-scripts-frontend ts-compile",
    "ts:lint": "billo-scripts-frontend ts-lint",
    "ts:test": "billo-scripts-frontend ts-test",
    "ts:watch": "billo-scripts-frontend ts-watch-babel"
  }
}

Add the following scripts to package.json if you are using the Babel toolchain.

{
  "scripts": {
    "build": "billo-scripts-frontend build-babel",
    "test": "billo-scripts-frontend test",
    "css:lint": "billo-scripts-frontend css-lint",
    "ts:check": "billo-scripts-frontend ts-check",
    "ts:compile": "billo-scripts-frontend ts-compile-babel",
    "ts:lint": "billo-scripts-frontend ts-lint",
    "ts:test": "billo-scripts-frontend ts-test",
    "ts:watch": "billo-scripts-frontend ts-watch-babel"
  }
}

It is possible to skip hooks for sequence tasks by passing --skip-pre-script, --skip-script, and --skip-post-script, which is the same as --skip-pre-script=<task-name>, --skip-script=<task-name>, and --skip-post-script=<task-name>.

Configuration files

Add the following scripts to package.json if you are using the webpack toolchain.

{
  "scripts": {
    "build": "billo-scripts-frontend build-webpack",
    "test": "billo-scripts-frontend test",
    "css:lint": "billo-scripts-frontend css-lint",
    "ts:check": "billo-scripts-frontend ts-check",
    "ts:compile": "billo-scripts-frontend ts-compile-webpack",
    "ts:lint": "billo-scripts-frontend ts-lint",
    "ts:test": "billo-scripts-frontend ts-test",
    "ts:watch": "billo-scripts-frontend ts-watch-babel"
  }
}

Add a babel.config.json file in the same folder as package.json.

/* eslint-env node */
module.exports = require('@billogram/babel-config-frontend');

Add a tsconfig.json file in the same folder as package.json.

{
  "extends": "@billogram/typescript-config-frontend",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Add a tsconfig.declaration.json file in the same folder as package.json.

{
  "extends": "@billogram/typescript-config-frontend",
  "compilerOptions": {
    "declaration": true,
    "declarationMap": false,
    "emitDeclarationOnly": true,
    "noEmit": false,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "exclude": [
    "src/*.test.*"
  ],
  "include": [
    "src/**/*"
  ]
}

Add a tslint.eslint.json file in the same folder as package.json.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "allowJs": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "**/*"
  ]
}

Tasks

Sequence tasks

These tasks will be run in silent mode, which means the output for each individual task will be minimal. It is possible to exclude a task from a sequence by adding --no-<task-name> after the sequence task name, for example billo-scripts-frontend test --no-css-lint.

`build`

Run all necessary tasks to generate a fresh Rollup build in the dist folder.

empty-dist
ts-declarations
ts-compile for development env
filter-dist

`build-babel`

Run all necessary tasks to generate a fresh Babel build in the dist folder.

empty-dist
build-babel-declarations-and-compile
filter-dist

`build-babel-declarations-and-compile`

Generate type declaration and compile with Babel.

ts-declarations
ts-compile-babel for development env

`build-webpack`

Run all necessary tasks to generate a fresh webpack build in the dist folder.

empty-dist
ts-declarations
ts-compile for development env
ts-compile for production env
filter-dist

`test`

Run all necessary tasks to test the quality of the project.

ts-check
ts-lint
ts-test
css-lint

`build-style`

Run all necessary tasks to "build" a style project.

`test-style`

Run all necessary tasks to test the quality of a style project.

css-lint

Simple tasks

`empty-dist`

Empty the dist folder.

`example`

Start a webpack dev server.

`filter-dist`

Remove unwanted test and source map files from the dist folder.

`css-lint`

Lint SCSS source files using stylelint.

`ts-check`

Type-check TypeScript.

`ts-compile`

Compile TypeScript to JavaScript and bundle using Rollup; put the output in the dist folder.

`ts-compile-babel`

Compile TypeScript to JavaScript and put the output in the dist folder.

`ts-compile-webpack`

Compile TypeScript to JavaScript and bundle using webpack; put the output in the dist folder.

`ts-declarations`

Generate TypeScript declarations.

`ts-lint`

Lint source files using ESLint.

`ts-test`

Run tests using Jest.

Note

This library is being published with our use cases in mind and is not necessarily meant to be consumed by the broader public. We probably won't take your feature requests unless they align with our own needs.