内容简介:说到变量本章主要涉及完整的列表这儿就不展示了,显示那如何在 npm script 引用并展示这些变量呢?很简单变量前面加上
说到变量本章主要涉及 预定义变量和自定义变量 ,那么使用变量有哪些好处对于我们编程?这也是本章所要重点表达的,使用变量可直接把积累起来的 npm script 使用到其他项目中,无需任何修改。是不是想到了 DRY(Dot't Repeat)编程原则了。
预定义变量
npm run env 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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。