An npm script is a named command stored in the scripts object of package.json and run through npm. It gives a project a short, repeatable way to invoke tasks instead of typing a long tool path and its arguments each time. section 12.3 section 12.4
A first script
Add a scripts object to package.json: { "scripts": { "test": "echo 'Hello from package.json'" } }. Run it with npm run test. The name test is only the label; the command is the shell text assigned to it. section 12.3
A build workflow can grow incrementally:
- Install a tool locally as a development dependency, so the project records it in package.json and others can install the same project dependencies with npm install. section 12.3 section 12.4
- Add a build script whose command invokes the local Rollup executable with the component source, output file, module format, name, and source-map option. section 12.4
- Run the command with npm run build, then split larger workflows into names such as build-slider, build-coordpicker, and build-colorpicker. section 12.4
- Create an aggregate script such as build-rollup to chain component builds with &&, then run the full sequence with npm run build-rollup. section 12.4
Listing 12.7. A simple package.json script
{
"name": "wcia",
"version": "1.0.0",
"scripts": {
"test": "echo 'Hello from package.json'" #1
}
}
Inspect a minimal package.json script before extending the same pattern to component builds. 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
}
Compare a named build script with its long local Rollup command and output settings. section 12.4
