アプリケーションNPMスクリプト複雑なシーン

複雑な機能と動作により、NPMスクリプトが増加し続けると書き換えますが、スクリプトはますます肥大化し、騒々しい混乱package.json、読みやすいではありません。今回は、NPMスクリプトがそれらをファイルにポンピングを考えます。

Scriptyのソリューション

NPMコミュニティはありScriptyの [ヘルプを。実行する方法を見てください

インストールの依存関係

npm install scripty -D
// 或
yarn add scripty -D
复制代码

ディレクトリとファイルを作成します。

1.目次スクリプトとスクリプト/カバーを作成します。依存関係Scriptyのスクリプトディレクトリのエイリアスを提供することができる、デフォルトの設定ディレクトリです。

mkdir -p scripts/cover
// 或
mkdir scripts && mkdir scripts/cover
复制代码

2.ファイルスクリプト/ cover.sh、スクリプト/カバー/ server.shとのスクリプト/カバー/ open.shを作成します。あなたは、することができますcover:clean、cover:archive、precover、cover 和 postcover内のファイル（cover.sh）に抽出しました。

// 抽取文件的创建
touch scripts/cover.sh
touch scripts/cover/server.sh
touch scripts/cover/open.sh
复制代码

3.許可を与える、そうでない場合は不十分な権限によるエラーが発生しています。構文は重要ではありません理解していません。

// 给 *.sh 脚本赋予可执行权限
chmod -R a+x scripts/**/*.sh
复制代码

書きます

1. scripts/cover.shファイルの内容

#!/usr/bin/env bash

# precover(cover:clean) 清理 覆盖率报告
rimraf coverage && rimraf .nyc_output

# cover 生成 覆盖率报告
nyc --reporter=html npm run test

# cover:archive 归档 覆盖率报告  
cross-var \"make-dir coverage_archive/$npm_package_version && cross-var cpr coverage coverage_archive/$npm_package_version -o\"

# postcover 执行并打开覆盖率报告 
npm-run-all --parallel cover:server cover:open
复制代码

2. scripts/cover/server.shファイルの内容

#!/usr/bin/env bash

cross-var http-server coverage_archive/$npm_package_version -p $npm_package_config_port
复制代码

3. scripts/cover/open.shファイルの内容

#!/usr/bin/env bash

sleep 1

cross-var open http://localhost:$npm_package_config_port
复制代码

package.jsonドキュメントのscripts内容

"scripts": {    
    "//scripty": "# 复杂命令抽取",
    "cover": "scripty",
    "cover:server": "scripty",
    "cover:open": "scripty"
}
复制代码

分析します

*.sh 私たちは、Node.jsのファイルが書き込まれている使用します。
sleep 1 同期遅延効果は、PHP言語の睡眠と同様に、ファイルシステムが書き込みを確認してください。
package.json スクリプトは、より簡潔になります。

実行

npm run cover
复制代码

Node.jsのソリューション

解決するためのNode.jsとの2つの利点があります。

（これを達成するために、当社のクロス互換の端部との間にNPMスクリプトを覚えている）、クロスプラットフォームを実現することができます。
巧みなオン;

注：ベースの依存関係Scriptyの

インストールが依存します

npm install shelljs chalk -D
// 或
yarn add shell chalk -D
复制代码

書きます

1.ファイルとディレクトリを作成します。

// 目录创建
mkdir scripts
// 文件创建
touch scripts/cover.js
复制代码

scripts/cover.jsファイルの内容（置き換えcover/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('清理覆盖率报告', chalk.blue);
rm('-rf', 'coverage');
rm('-rf', '.nyc_output');

log('生成覆盖率报告');
exec('nyc --reporter=html npm run test');

log('归档覆盖率报告');
mkdir('-p', 'coverage_archive/0.0.2');
cp('-r', 'coverage/*', 'coverage_archive/0.0.2');

log('执行并打开覆盖率报告');
exec('npm-run-all --parallel cover:server cover:open');
复制代码

3.package.json 中 scripts

"scripts": {
    "cover": "node scripts/cover.js",
    "cover:server": "scripty",
    "cover:open": "scripty"
}
复制代码

分析します

script/server.shそして、script/open.shファイルがまだ必要とされています
中mkdir及びcpコマンド（shelljs）、予め定義された変数が$npm_package_version認識されません。

実行

npm run cover
复制代码

あなたはできる

最後の章：NPMスクリプトファイルと自動的にモニターのリフレッシュ

次の章：でGitのフックで使用NPMスクリプト

ます。https：//juejin.im/post/5cfd0a1451882502f9490fb8で再現