針對(duì)項(xiàng)目使用的npm，做一個(gè)簡單的原理和使用筆記。
npm 允許在package.json文件里面，使用scripts字段定義腳本命令。scripts是一個(gè)對(duì)象，每個(gè)屬性，對(duì)應(yīng)執(zhí)行腳本命令。
參考文章：引路文章之npm scripts 使用指南
#原理
每當(dāng)執(zhí)行npm run，就會(huì)自動(dòng)新建一個(gè) Shell，在這個(gè) Shell 里面執(zhí)行指定的腳本命令。注意：當(dāng)前目錄的node_modules/.bin子目錄里面的所有腳本，都可以直接用腳本名調(diào)用，而不必加上路徑。比如，當(dāng)前項(xiàng)目的依賴?yán)锩嬗?Mocha，只要直接寫mocha test。
執(zhí)行順序
- 并行執(zhí)行（即同時(shí)的平行執(zhí)行），可使用&符號(hào)。
npm run script1.js & npm run script2.js
- 繼發(fā)執(zhí)行（即只有前一個(gè)任務(wù)成功，才執(zhí)行下一個(gè)任務(wù)），可使用&&符號(hào)。
npm run script1.js && npm run script2.js
- 使用 node 的任務(wù)管理模塊：script-runner、npm-run-all、redrun。
鉤子
npm 腳本有pre和post兩個(gè)鉤子。eg:build腳本命令的鉤子就是prebuild和postbuild。
npm 初始化
執(zhí)行命令npm init填寫對(duì)應(yīng)信息進(jìn)行構(gòu)建
npm init 執(zhí)行.png
- name 項(xiàng)目名稱
- version 項(xiàng)目的版本號(hào)
- description 項(xiàng)目的描述信息
- entry point 項(xiàng)目的入口文件
- test command 項(xiàng)目啟動(dòng)時(shí)腳本命令
- git repository 如果你有 Git 地址，可以將這個(gè)項(xiàng)目放到你的 Git 倉庫里
- keywords 關(guān)鍵詞
- author 作者
- license 開源協(xié)議
#變量
- npm_lifecycle_event,該變量返回當(dāng)前正在運(yùn)行的腳本名稱，可以利用這個(gè)變量，在同一個(gè)腳本文件里面，為不同的npm scripts命令編寫代碼。
const TARGET = process.env.npm_lifecycle_event;
- 通過npm_package_前綴，npm 腳本可以拿到package.json里面的字段。
{
"name": "demo",
"version": "1.0.0",
"scripts": {
"build": "node build.js"
}
}
console.log(process.env.npm_package_name); // demo
console.log(process.env.npm_package_scripts_build); // 可獲取嵌套信息
常用腳本
// 刪除目錄
"clean": "rimraf dist/*",
// 本地搭建一個(gè) HTTP 服務(wù)
"serve": "http-server -p 9090 dist/",
// 打開瀏覽器
"open:dev": "opener http://localhost:9090",
// 實(shí)時(shí)刷新
"livereload": "live-reload --port 9091 dist/",
// 構(gòu)建 HTML 文件
"build:html": "jade index.jade > dist/index.html",
// 只要 CSS 文件有變動(dòng)，就重新執(zhí)行構(gòu)建
"watch:css": "watch 'npm run build:css' assets/styles/",
// 只要 HTML 文件有變動(dòng)，就重新執(zhí)行構(gòu)建
"watch:html": "watch 'npm run build:html' assets/html",
// 部署到 Amazon S3
"deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",
// 構(gòu)建 favicon
"build:favicon": "node scripts/favicon.js",
小棨留言：文章描述或者語法理解不到位的地方，請(qǐng)大家多多指教！
