npm script 環境變量的使用

時間 2019-11-07

標籤 npm script 環境變量使用简体版

原文原文鏈接

說到變量本章主要涉及預約義變量和自定義變量，那麼使用變量有哪些好處對於咱們編程？這也是本章所要重點表達的，使用變量可直接把積累起來的 npm script 使用到其餘項目中，無需任何修改。是否是想到了 DRY（Dot't Repeat）編程原則了。javascript

預約義變量

拿到完整的變量列表 npm run env，好長的，想來這些於你我去閱讀沒有興趣；
拿到項目中 package.json 中顯性的變量列表，npm run env | grep npm_package | sort，順便在加個排序;

完整的列表這兒就不展現了，顯示 package.json 的顯性列表以下css

// 做者相關信息
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 引用並展現這些變量呢？很簡單變量前面加上 $：html

{
    "package_name": "echo $npm_package_name"
}
複製代碼

舉例子

仍是那測試覆蓋率還說，測試覆蓋率歸檔是比較常見的需求，它便於追蹤覆蓋率的變化趨勢，關於歸檔可依狀況而定java

簡單項目，直接歸檔的文件系統中，即把收集到的覆蓋率報告按惟一 Key 存放，Key 選擇版本號；
複雜項目，也是完全的作法，就是歸檔到 CI 系統；

咱們的測試小項目就選簡單項目作個示例吧，package.json 中 scripts 的 cover 這塊命令總體改寫react

"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"
}
複製代碼

示例命令剖析

逐漸剖析下上面的改動命令git

cover:cleanup，清理本次覆蓋率報告；
cover:archive，歸檔本次覆蓋率報告；
- mkdir -p coverage_archive/$npm_package_version 新建歸檔目錄和當前歸檔版本號目錄
- cp -r coverage/* coverage_archive/$npm_package_version 拷貝本次覆蓋率報告文件到當前歸檔版本號目錄
postcover，執行清理本次覆蓋率報告和歸檔本次覆蓋率報告命令，而後打開本次覆蓋率報告；

運行 npm run cover，可看到生成本次版本覆蓋率報告github

使用自定義變量

說完了預約義變量，就說着自定義變量吧。npm

舉例子

有這麼我的性化的場景，就是覆蓋率報告除了本身看，還但願分享給他人看。對，本身本地起個 http 服務，而後使用本身的 IP 地址分享給同事 http://本身IP:端口。啓動本地服務推薦個輕量的 http 服務 http-server編程

npm i -D http-server
複製代碼

package.json 中 scripts 也要作相應改動json

{
    "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 來編排子命令；