说到变量本章主要涉及预定义变量和自定义变量，那么使用变量有哪些好处对于我们编程？这也是本章所要重点表达的，使用变量可直接把积累起来的 npm script 使用到其他项目中，无需任何修改。是不是想到了 DRY（Dot't Repeat）编程原则了。

预定义变量

拿到完整的变量列表 npm run env，好长的，想来这些于你我去阅读没有兴趣；
拿到项目中 package.json 中显性的变量列表，npm run env | grep npm_package | sort，顺便在加个排序;

完整的列表这儿就不展示了，显示 package.json 的显性列表如下

// 作者相关信息
npm_package_author_email=ruizhengyun@gmail.com
npm_package_author_name=ruizhengyun
npm_package_author_url=https://github.com/ruizhengyun
// 依赖相关信息
npm_package_dependencies_react=^16.8.6
npm_package_dependencies_react_dom=^16.8.6
// 基本信息
npm_package_description=
// 依赖相关信息
npm_package_devDependencies_eslint=^5.16.0
npm_package_devDependencies_eslint_config_airbnb=^17.1.0
npm_package_devDependencies_eslint_plugin_import=^2.17.3
npm_package_devDependencies_eslint_plugin_jsx_a11y=^6.2.1
npm_package_devDependencies_eslint_plugin_react=^7.13.0
npm_package_devDependencies_jsonlint=^1.6.3
npm_package_devDependencies_markdownlint_cli=^0.16.0
npm_package_devDependencies_mocha=^6.1.4
npm_package_devDependencies_npm_run_all=^4.1.5
npm_package_devDependencies_nyc=^14.1.1
npm_package_devDependencies_open_cli=^5.0.0
npm_package_devDependencies_stylelint=^10.0.1
npm_package_devDependencies_stylelint_config_standard=^18.3.0
// 基本信息
npm_package_license=MIT
npm_package_main=index.js
npm_package_name=project
// 依赖的配置
npm_package_nyc_exclude_0=**/*.spec.js
npm_package_nyc_exclude_1=.*.js
// 各种命令 npm script
npm_package_scripts_cover=nyc --reporter=html npm test
npm_package_scripts_env=env
npm_package_scripts_lint_bx=npm run lint:js & npm run lint:jsx & npm run lint:css & npm run lint:json & npm run lint:markdown & wait
npm_package_scripts_lint_bx_all="# 并行检查所有代码编程风格 \n  npm-run-all --parallel lint:*"
npm_package_scripts_lint_css=stylelint ./src/**/*.{html,css,less,scss} & wait
npm_package_scripts_lint_cx=npm run lint:js && npm run lint:jsx && npm run lint:css && npm run lint:json && npm run lint:markdown
npm_package_scripts_lint_cx_all=npm-run-all lint:*
npm_package_scripts_lint_fix_css=npm run lint:css -- --fix
npm_package_scripts_lint_fix_js=npm run lint:js -- --fix
npm_package_scripts_lint_fix_jsx=eslint ./src/**/*.jsx & wait
npm_package_scripts_lint_js="# 检查 .js 代码编程风格 \n  eslint ./src/**/*.js & wait"
npm_package_scripts_lint_json=jsonlint --quiet ./src/**/*.json
npm_package_scripts_lint_jsx=eslint ./src/**/*.jsx & wait
npm_package_scripts_lint_markdown=markdownlint --config .markdownlint.json ./src/**/*.md
npm_package_scripts_mocha=mocha tests/
npm_package_scripts_postcover=rm -rf .nyc_output && open coverage/index.html
npm_package_scripts_precover=rm -rf coverage
npm_package_scripts_test="# 运行所有代码检查和单元测试 \n npm-run-all --parallel lint:* mocha"
// 基本信息
npm_package_version=0.0.1

那如何在 npm script 引用并展示这些变量呢？很简单变量前面加上 $：

{
    "package_name": "echo $npm_package_name"
}

举例子

还是那测试覆盖率还说，测试覆盖率归档是比较常见的需求，它便于追踪覆盖率的变化趋势，关于归档可依情况而定

简单项目，直接归档的文件系统中，即把收集到的覆盖率报告按唯一 Key 存放，Key 选择版本号；
复杂项目，也是彻底的做法，就是归档到 CI 系统；

我们的测试小项目就选简单项目做个示例吧，package.json 中 scripts 的 cover 这块命令整体改写

"scripts": {
    "lint-cx:all": "# 串行 npm-run-all \n  npm-run-all lint:*",
    "lint-cx": "# 串行 \n  npm run lint:js && npm run lint:jsx && npm run lint:css && npm run lint:json && npm run lint:markdown",
    "lint-bx:all": "# 并行 npm-run-all \n  npm-run-all --parallel lint:*",
    "lint-bx": "# 并行 \n  npm run lint:js & npm run lint:jsx & npm run lint:css & npm run lint:json & npm run lint:markdown & wait",
    "lint:js": "# 检查 js \n  eslint ./src/**/*.js & wait",
    "lint-fix:js": "# 修复 js \n  npm run lint:js -- --fix",
    "lint:jsx": "# 检查 jsx \n  eslint ./src/**/*.jsx & wait",
    "lint-fix:jsx": "# 修复 jsx \n  eslint ./src/**/*.jsx & wait",
    "lint:css": "# 检查 css \n  stylelint ./src/**/*.{html,css,less,scss} & wait",
    "lint-fix:css": "# 修复 css \n  npm run lint:css -- --fix",
    "lint:json": "# 检查 json \n  jsonlint --quiet ./src/**/*.json & wait",
    "lint:markdown": "# 检查 markdown \n  markdownlint --config .markdownlint.json ./src/**/*.md  & wait",
    "mocha": "mocha tests/",
    "test": "# 单元测试 \n npm-run-all --parallel lint:* mocha",
    "dummy": "# 显示 css \n  echo $npm_package",
    "//": "# 下面做了改动",
    "cover:cleanup": "# 清理覆盖率报告- \n  rm -rf coverage && rm -rf .nyc_output",
    "cover": "# 生成覆盖率报告 \n  nyc --reporter=html npm run test",
    "cover:archive": "# 归档覆盖率报告  \n  mkdir -p coverage_archive/$npm_package_version && cp -r coverage/* coverage_archive/$npm_package_version",
    "postcover": "# 执行并打开覆盖率报告 \n  npm run cover:archive && npm run cover:cleanup && open coverage_archive/$npm_package_version/index.html"
}

示例命令剖析

逐渐剖析下上面的改动命令

cover:cleanup，清理本次覆盖率报告；
cover:archive，归档本次覆盖率报告；
- mkdir -p coverage_archive/$npm_package_version 新建归档目录和当前归档版本号目录
- cp -r coverage/* coverage_archive/$npm_package_version 拷贝本次覆盖率报告文件到当前归档版本号目录
postcover，执行清理本次覆盖率报告和归档本次覆盖率报告命令，然后打开本次覆盖率报告；

运行 npm run cover，可看到生成本次版本覆盖率报告

使用自定义变量

说完了预定义变量，就说着自定义变量吧。

举例子

有这么个人性化的场景，就是覆盖率报告除了自己看，还希望分享给他人看。对，自己本地起个 http 服务，然后使用自己的 IP 地址分享给同事 http://自己IP:端口。启动本地服务推荐个轻量的 http 服务 http-server

npm i -D http-server

package.json 中 scripts 也要做相应改动

{
    "config": {
        "port": 3000
    },
    "scripts": {
        ...,
        "//": "# 下面做了改动",
        "cover:cleanup": "# 清理覆盖率报告- \n  rm -rf coverage && rm -rf .nyc_output",
        "cover": "# 生成覆盖率报告 \n  nyc --reporter=html npm run test",
        "cover:archive": "# 归档覆盖率报告  \n  mkdir -p coverage_archive/$npm_package_version && cp -r coverage/* coverage_archive/$npm_package_version",
        "cover:server": "http-server coverage_archive/$npm_package_version -p $npm_package_config_port",
        "cover:open": "open http://localhost:$npm_package_config_port",
        "postcover": "# 执行并打开覆盖率报告 \n  npm-run-all cover:archive cover:cleanup --parallel cover:server cover:open"
    }
}

示例命令剖析

逐渐剖析下上面的改动命令

cover:server，本地启动服务，其中使用了预定义变量 $npm_package_version(版本) 和自定义变量 $npm_package_config_port(端口)；
cover:open，从直接打开网页到打开本地启动服务的地址；
postcover，执行归档本次覆盖率报告和清理本次覆盖率报告命令，然后启动服务并打开本次覆盖率报告网址，即使用 npm-run-all 来编排子命令；

postcover 这个命令中给 cover:server cover:open 添加了并行参数 --parallel ,这是因为命令 cover:server 不会自动退出。

运行 npm run cover，可看到生成本次版本覆盖率报告

同时浏览器会打开覆盖率报告，如下图：

你可以...

上一篇: npm script 钩子的使用

下一篇: npm script 跨端兼容的实现

目录：npm script 小书