liveBook · Manning

Build system

As explained in Web Components in Action

A build system is software that automates transforming source code and project inputs into artifacts through tasks such as compiling, testing, and packaging.

A build system coordinates frontend tasks that transform project files for use or delivery. Build steps can bundle code for production, transpile newer JavaScript for older browsers, or combine HTML snippets. section 12.3

Choose the simplest setup that fits the work:

  • Use npm scripts in package.json to run tasks without relying on a more complex build system. section 12.6
  • Grunt and Gulp aim to handle many tasks; Webpack focuses on bundling assets but can overlap with them. section 12.3
Listing 12.7. A simple package.json script
{
 "name": "wcia",
 "version": "1.0.0",
 "scripts": {
   "test": "echo 'Hello from package.json'"       #1
 }
}

A package.json scripts entry shows how an npm script can define a runnable project task. section 12.3

How Web Components in Action covers it

How deep it goes
Introduces build-step motivations and npm scripts, while contrasting them with more complex systems.
Examples
Uses npm installation commands and a package.json test script to illustrate project setup and task running.
What you can do after
Apply it via npm scripts to run project tasks without setting up a more complex build system.
How it connects
Connects build systems with Node.js, npm scripts, bundling, transpilation, Grunt, Gulp, and Webpack.

Also explained in

Compare how 2 books explain build system →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.