As functionality and business complexity increases, NPM scripts will be added and rewritten, and scripts in package.json will become bloated, noisy, and not easy to read. At this point, we will want to pull the NPM script into the file.

Scripty solutions

Having Scripty in the NPM community helps. See how it works

Installing dependency packages

npm install scripty -D
/ / or
yarn add scripty -D
Copy the code

Create directories and files

1. Create directories scripts and scripts/cover. The scripts directory is the default configuration directory that depends on the package Scripty and can also be aliased.

Mkdir -p scripts/cover // or mkdir scripts && mkdir scripts/coverCopy the code

2. Create files scripts/cover.sh, scripts/cover/server.sh, and scripts/cover/open.sh. Cover: Clean, Cover: Archive, precover, cover, and postcover can be extracted into a file (cover.sh).

Touch scripts/cover.sh touch scripts/cover/server.sh touch scripts/cover/open.shCopy the code

3. Grant permissions. Otherwise, errors may occur due to insufficient permissions. It doesn’t matter if you don’t know the grammar.

Chmod -r a+x scripts/**/*.shCopy the code

write

1. Contents of the scripts/cover.sh file

#! /usr/bin/env bash
# precover(cover: Clean) Cleanup coverage report
rimraf coverage && rimraf .nyc_output

# cover Generates a coverage report
nyc --reporter=html npm run test

# cover:archive Archive coverage report
cross-var \"make-dir coverage_archive/$npm_package_version && cross-var cpr coverage coverage_archive/$npm_package_version-o\" # postcover execute and open coverage report NPM -run-all -- Parallel cover:server cover:openCopy the code

2. Scripts/cover/server. Sh file content

#! /usr/bin/env bash
cross-var http-server coverage_archive/$npm_package_version -p $npm_package_config_port
Copy the code

3. Contents of the scripts/cover/open.sh file

#! /usr/bin/env bash
sleep 1

cross-var open http://localhost:$npm_package_config_port
Copy the code
  1. package.jsonIn the filescriptscontent
"scripts": {    
    "//scripty": "# complex command extraction"."cover": "scripty"."cover:server": "scripty"."cover:open": "scripty"
}
Copy the code

Analyze the

  • *.shThe files are written using Node.js;
  • sleep 1Synchronization delay, similar to sleep in PHP, ensures file system writes;
  • package.jsonScripts is much cleaner;

perform

npm run cover
Copy the code

Node.js solution

Using Node.js has two advantages:

  • Cross-platform (remember our NPM Script cross-compatible implementation);
  • On the load;

Note: Based on dependency package scripty

Install dependencies

npm install shelljs chalk -D
/ / or
yarn add shell chalk -D
Copy the code

write

1. Create directories and files

// Create a directory
mkdir scripts
// Create a file
touch scripts/cover.js
Copy the code
  1. scripts/cover.jsFile content (replacecover/cover.sh)
const { rm, cp, mkdir, exec } = require('shelljs');
const chalk = require('chalk');
const log = function (ctx, fn) {
    fn = fn ? fn : chalk.green;
    console.log(fn(ctx));
};


log('Clean-up Coverage Report', chalk.blue);
rm('-rf'.'coverage');
rm('-rf'.'.nyc_output');

log('Generate coverage report');
exec('nyc --reporter=html npm run test');

log('Archive Coverage Report');
mkdir('-p'.'coverage_archive/hundreds');
cp('-r'.'coverage/*'.'coverage_archive/hundreds');

log('Execute and open coverage report');
exec('npm-run-all --parallel cover:server cover:open');
Copy the code

3. Package. Scripts in json

"scripts": {
    "cover": "node scripts/cover.js"."cover:server": "scripty"."cover:open": "scripty"
}
Copy the code

Analyze the

  • script/server.sh 和 script/open.shThe documents are still needed
  • inmkdir 和 cpCommand (shelljs), predefined variables$npm_package_versionDon’t recognize;

perform

npm run cover
Copy the code

You can…

NPM Script for file listening and automatic refreshing

NPM script used in Git hooks

Directory: NPM Script small book