A build step transforms code or assets between editing and browser delivery. It can compile CSS, assemble HTML snippets, transpile code to JavaScript, or bundle modules, so the browser may not run the files as written. section 12.3 section 12.4
A lightweight way to run build tasks is through npm scripts in package.json:
- Install tools such as Rollup as development dependencies. section 12.4
- Add scripts to build individual components, then chain those scripts to run several builds. section 12.4
- Choose tools to suit the task; build systems can overlap, and simpler workflows may be enough. section 12.3
Listing 12.9. Adding a Rollup script in package.json
{
"name": "wcia",
"version": "1.0.0",
"dependencies": {},
"devDependencies": {
"rollup": "^1.0.2"
},
"scripts": {
"build": "./node_modules/.bin/rollup chapter12and13/components/slider/src/#1
slider.js --file chapter12and13/components/slider/slider.js --format #1
umd --name slider -m" #1
}
A package.json script runs Rollup on a component’s source file and writes a bundled output file. section 12.4
Building a component
A slider component can be bundled from its source file into a UMD output; a source map can help connect errors in that output to the source files. section 12.4
