# @financial-times/dotcom-page-kit-cli

> The Page Kit CLI

Latest version **0.6.3** (published 2020-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @financial-times/dotcom-page-kit-cli
pnpm add @financial-times/dotcom-page-kit-cli
yarn add @financial-times/dotcom-page-kit-cli
bun add @financial-times/dotcom-page-kit-cli
```

Provides the commands `pagekit`, `page-kit`.

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.3 |
| Published | 2020-03-18 |
| First published | 2019-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 12.0.0 |
| Dependencies | 14 |
| Unpacked size | 39.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aendrew, axgy, bobhaslett, briggsc, chee, conor-mullen, ft-internal-products, i-like-robots, jakedchampion, joannaskao, mattandrews, notlee, quarterto, robinmarr-ft, rowanmanning, sdbernard, tatiana.stantonian, the-ft |

## Links

- npm: https://www.npmjs.com/package/@financial-times/dotcom-page-kit-cli
- Homepage: https://github.com/Financial-Times/dotcom-page-kit/tree/master/packages/dotcom-page-kit-cli
- npm.io page: https://npm.io/package/@financial-times/dotcom-page-kit-cli

## Dependencies (14)

- [ora](https://npm.io/package/ora.md) ^4.0.0
- [webpack](https://npm.io/package/webpack.md) ^4.39.2
- [commander](https://npm.io/package/commander.md) ^4.0.0
- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.5.0
- [ansi-escapes](https://npm.io/package/ansi-escapes.md) ^4.0.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.5
- [cli-progress](https://npm.io/package/cli-progress.md) ^3.0.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.5.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.5.0
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^3.0.0
- [webpack-assets-manifest](https://npm.io/package/webpack-assets-manifest.md) ^3.1.1
- [compression-webpack-plugin](https://npm.io/package/compression-webpack-plugin.md) ^3.0.0
- [@financial-times/dotcom-page-kit-pluggable](https://npm.io/package/@financial-times/dotcom-page-kit-pluggable.md) ^0.6.3

## Recent versions

- 0.6.3 (latest) — 2020-03-18
- 0.6.5 (maintenance) — 2020-04-16
- 0.6.2 — 2020-02-24
- 0.6.1 — 2020-02-11
- 0.6.0 — 2020-02-10
- 0.5.8 — 2020-01-27
- 0.5.7 — 2020-01-22
- 0.5.6 — 2020-01-22
- 0.5.5 — 2020-01-21
- 0.4.5 — 2020-01-10
- 0.5.4 — 2020-01-10
- 0.4.4 — 2019-12-20
- 0.5.3 — 2019-12-20
- 0.5.2 — 2019-12-13
- 0.4.3 — 2019-12-13
- … 28 more at https://npm.io/package/@financial-times/dotcom-page-kit-cli/versions

## README

# @financial-times/dotcom-page-kit-cli

The Page Kit CLI provides a suite of actions to assemble modern Web projects. The CLI can be extended via plugins to provide additional functionality.


## Getting started

This package is compatible with Node 12+ and is distributed on npm.

```sh
npm install --save-dev @financial-times/dotcom-page-kit-cli
```

Configuration is provided to the CLI by a `page-kit.config.js` file placed in your project root (next to `package.json`). Create this file now, including the fields defined below:

```js
module.exports = {
  plugins: [],
  settings: {}
}
```

The `plugins` property is used to supply the plugins that should be loaded by the Page Kit CLI. These plugins should be installed in your project as development dependencies. Plugins by convention are namespaced with `dotcom-build-`.

The `settings` property is used to provide specific configuration for the individual CLI actions. These settings are covered below (see [actions](#actions).)

To view the available actions and global options provided by the CLI, run the `page-kit` command with the `--help` flag:

```sh
page-kit --help
```


## Actions

### `build`

This action can be used to assemble the static assets for your application using Webpack. By default this action includes only a barebones Webpack configuration to bundle JavaScript source code but this can be extended via plugins to add additional functionality.

The action also creates a `manifest.json` (the file name is default but can be [configured](#Manifest-file-name)). It includes the hashed output names for the generated `.js` and `.css` chunks

#### Options

##### Entry points

The path for the entry point into your source code can be provided via the `--entryFile` CLI flag or via the configuration file. The default entry point is `"src/index.js"`. Multiple entry points can only be defined using the configuration file. See the [Webpack entry documentation] for more information about entry points. The configuration file will take precedence over the CLI flag.

[Webpack entry documentation]: https://webpack.js.org/concepts/entry-points/

Usage via CLI flag:

```sh
page-kit build --entryFile ./path/to/entry.js
```

Usage via configuration file:

```js
module.exports = {
  plugins: [...],
  settings: {
    build: {
      entry: {
        main: './path/to/entry.js'
      }
    }
  }
}
```

##### Output path

The generated output can be directed to a destination directory using the `--outputPath` CLI flag or via the configuration file. The default destination is `"./dist"`. The configuration file will take precedence over the CLI flag.

Usage via CLI flag:

```sh
page-kit build --outputPath ./path/to/dist
```

Usage via configuration file:

```js
module.exports = {
  plugins: [...],
  settings: {
    build: {
      outputPath: './path/to/dist'
    }
  }
}
```

Files will be created using the pattern `[name].js` in development mode and `[name].[contenthash].js` in production mode.

##### Manifest file name

The generated manifest file details the hashed output names for the emitted `.js` and `.css` chunks. The file name can be changed via the configuration file. The default file name is `"manifest.json"`.

Usage via configuration file:

```js
module.exports = {
  plugins: [...],
  settings: {
    build: {
      manifestFileName: 'asset-hashes.json'
    }
  }
}
```

##### Targets

A [browserslist-compatible] query that describes the environments you support / target for your project. It defaults to: `last 2 Chrome versions, ie 11, Safari >= 9.1, ff ESR, last 2 Edge versions`.

Usage via configuration file:

```js
module.exports = {
  plugins: [...],
  settings: {
    build: {
      targets: {
        chrome: '58',
        ie: '11'
      }
    }
  }
}
```

[browserslist-compatible]: https://github.com/browserslist/browserslist

##### Development and production modes

In production mode the generated output will be optimised, file names hashed, and full source maps, gzip and brotli compressed assets generated. Production mode is the default.

To enable development mode you can use the `--development` CLI flag. This will disable several optimisations in favour of providing faster builds and rebuilds. See the [Webpack mode documentation] for further information about modes.

```sh
page-kit build --development
```

[Webpack mode documentation]: https://webpack.js.org/concepts/mode/

##### Watch mode

For convenience the build action can watch source files and trigger a rebuild whenever they change. To enable watch mode use the `--watch` CLI flag.

```sh
page-kit build --watch
```


## Hooks

This plugin exposes the following hooks as extension points. They are available as constants on the exported `hooks` object.

```js
import { hooks } from '@financial-times/dotcom-page-kit-cli'
```

_Please note: The hooks below are listed in the order they will be executed._

##### `WEBPACK_CLEAN_PLUGIN_OPTIONS`

Configuration options for the [clean plugin](https://github.com/johnagan/clean-webpack-plugin).

##### `WEBPACK_GZIP_COMPRESSION_PLUGIN_OPTIONS`

Configuration options for the [compression plugin](https://github.com/webpack-contrib/compression-webpack-plugin) set to use the gzip algorithm.

##### `WEBPACK_BROTLI_COMPRESSION_PLUGIN_OPTIONS`

Configuration options for the [compression plugin](https://github.com/webpack-contrib/compression-webpack-plugin) set to use the Brotli algorithm.

##### `WEBPACK_MANIFEST_PLUGIN_OPTIONS`

Configuration options for the [assets manifest plugin](https://github.com/webdeveric/webpack-assets-manifest) which provides the compilation entrypoints for each bundle by asset type e.g. `scripts` and `styles`.

##### `BABEL_CONFIG`

Configuration options for [Babel](https://babeljs.io/docs/en/options).

##### `BABEL_PRESET_ENV_OPTIONS`

Configuration options for [Babel Preset Env](https://babeljs.io/docs/en/babel-preset-env#options).

##### `WEBPACK_JS_RULE`

The Webpack [rule] for handling JavaScript files.

[rule]: https://webpack.js.org/configuration/module/#rule

##### `WEBPACK_CONFIG`

The complete Webpack configuration object.

---
_Source: https://npm.io/package/@financial-times/dotcom-page-kit-cli · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._