Package Exports

@sinclair/hammer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@sinclair/hammer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Hammer

Build Tool for Browser and Node Applications

Install

$ npm install @sinclair/hammer -g

Usage

Create an index.html file

<!DOCTYPE html>
<html>
  <head>
    <link href="index.css" rel="stylesheet" />
    <script src="index.tsx"></script>
  </head>
  <body>
    <img src="banner.png" />
  </body>
</html>

Run Hammer

$ hammer build index.html

Done

Overview

Hammer is a build tool for browser and node applications. It provides a unified command line interface for developing browser and node application types and includes appropriate watch and reload workflows for each. Hammer also has support for linking shared local libraries taken by browser and node projects using standard TypeScript tsconfig.json configuration.

Hammer was written to consolidate several disparate tools related to monitoring node processes (nodemon), building from HTML (parcel) and mono repository support (lerna, nx). It takes esbuild as its only dependency and is as much concerned with build performance as it is dramatically reducing the number of development dependencies required for modern web application development.

License MIT

Serve

Hammer provides a built in development server. To use run hammer serve [...paths]. This will start a watch and reload server on port 5000 by default. See the command line interface section for additional options.

<!DOCTYPE html>
<html>
  <head>
    <script src="index.tsx"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

$ hammer serve index.html

Start

Hammer provides support running monitored NodeJS processes that restart on save. To use run hammer start <path> [...args]. See the command line interface section for additional options.

import * as http from 'http'

http.createServer((req, res) => res.end('hello world')).listen(5001)

$ hammer start index.ts

Task

Hammer provides support for running project automation tasks that can be used to orchestrate build and watch workflows. This is handled with a file named hammer.ts in the current working directory. Hammer can call into this file to run any exported function, as follows.

// hammer.ts
export function hello(name: string) {
  console.log(`hello, ${name}`)
}

$ hammer task hello dave

Additionally, Hammer provides several built in libraries to run common file, folder, shell and watch operations. For example, the following runs two hammer processes in parallel using the shell utility.

// hammer.ts
import { shell, file, folder, watch } from '@sinclair/hammer'

export async function start(target = 'dist') {
  await shell([
    `hammer start src/server/index.ts --dist ${target}/server`,
    `hammer serve src/website/index.html --dist ${target}/website`
  ])
}

$ hammer task start

The file, folder, shell and watch utilities are well documented and should be fairly easy to understand. Additional functionality for building and processing assets can be written or installed via npm.

Libraries

It is common to want to move shared library code outside the main application tree into a libs directory. This is typical in scenarios where shared library code may need to be published or reused for a number of applications local to the project. Hammer provides support for this by way of tsconfig.json configuration.

Consider the following directory structure.

/apps
  /server
    index.ts    ───────────┐
  /website                 │
    index.html             │
    index.ts    ───────────┤ 
/libs                      │
  /foo                     │
    index.ts    <──────────┤
  /bar                     │
    index.ts    <──────────┤ depends on
  /baz                     │
    index.ts    <──────────┘
tsconfig.json

To enable the applications to import these libraries, configure the baseUrl and paths options of the tsconfig.json file as follows.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@libs/foo": ["libs/foo/index.ts"],
            "@libs/bar": ["libs/bar/index.ts"],
            "@libs/baz": ["libs/baz/index.ts"],
        }
    }
}

Once configured, the server and website applications can import with the following.

import { Foo } from '@libs/foo'
import { Bar } from '@libs/bar'
import { Baz } from '@libs/baz'

const foo = new Foo()
const bar = new Bar()
const baz = new Baz()

console.log(foo, bar, baz)

Command Line Interface

Hammer provides the following CLI interface. The [...paths] can be any file or directory. If a directory is passed for a path, Hammer will copy the directory into the dist location as well as process assets within. The --watch option will only watch for changes. To serve or start a node process use --serve or --start respectively which implicitly enables --watch.

Examples: 

  $ hammer [...paths] <...options>
  $ hammer index.html about.html
  $ hammer index.html images --dist target/website
  $ hammer index.html --serve 5000
  $ hammer index.ts --start index.js
  $ hammer index.ts --minify

Options:

  --target    <target>  Sets the ES target. (default: esnext)
  --platform  <target>  Sets the platform. Options are browser or node. (default: browser)
  --dist                Sets the output directory. (default: dist)
  --serve     <port>    Watch and serves on the given port.
  --start     <script>  Watch and starts a script.
  --watch               Watch and compile on save only.
  --minify              Minifies the bundle.
  --sourcemap           Generate sourcemaps.