摘要:腳本的退出碼,也遵守腳本規(guī)則。比如,這個腳本命令,也有和鉤子。簡寫是的簡寫是的簡寫是的簡寫是的簡寫執(zhí)行順序的內(nèi)部變量通過前綴,腳本可以拿到里面的字段如果是腳本,可以用前綴取值腳本還可以通過前綴,拿到的配置變量,即命令返回的值。
什么是 npm 腳本?
在package.json文件里面,使用scripts字段定義的腳本命令
{ // ... "scripts": { "build": "node build.js" } }如何執(zhí)行是 npm 腳本?
$ npm run build # 等同于執(zhí)行 $ node build.js不知道有什么 npm 腳本??
#查看當(dāng)前項目的所有 npm 腳本命令 #(其實也可以在package.json的看scripts對象里有什么屬性) npm runnpm的原理??
通配符&轉(zhuǎn)義每當(dāng)執(zhí)行npm run,就會自動新建一個 Shell,在這個 Shell 里面執(zhí)行指定的腳本命令。
因此,只要是 Shell(一般是 Bash)可以運行的命令,就可以寫在 npm 腳本里面。比較特別的是,npm run新建的這個 Shell,會將當(dāng)前目錄的node_modules/.bin子目錄加入PATH變量,執(zhí)行結(jié)束后,再將PATH變量恢復(fù)原樣。這意味著,當(dāng)前目錄的node_modules/.bin子目錄里面的所有腳本,都可以直接用腳本名調(diào)用,而不必加上路徑。
由于 npm 腳本的唯一要求就是可以在 Shell 執(zhí)行,因此它不一定是 Node 腳本,任何可執(zhí)行文件都可以寫在里面。npm 腳本的退出碼,也遵守 Shell 腳本規(guī)則。如果退出碼不是0,npm 就認(rèn)為這個腳本執(zhí)行失敗。
同shell
// *表示任意文件名,**表示任意一層子目錄 "lint": "jshint *.js" "lint": "jshint **/*.js" // 將通配符傳入原始命令,防止被 Shell 轉(zhuǎn)義,要將星號轉(zhuǎn)義 "test": "tap test/*.js"傳參
向 npm 腳本傳入?yún)?shù),要使用--標(biāo)明
# package.json "deploy": "gulp deploy", # 命令行 $ npm run deploy -- --test一個命令執(zhí)行多個任務(wù)??
#并行執(zhí)行(即同時的平行執(zhí)行),使用&符號 $ npm run serve & npm run dev #繼發(fā)執(zhí)行(即只有前一個任務(wù)成功,才執(zhí)行下一個任務(wù)),使用&&符號 $ npm run build && npm run deploy默認(rèn)腳本
不用定義,就可以直接使用(前提是項目根目錄下有server.js腳本和rebuild文件)
"start": "node server.js", "install": "node-gyp rebuild"鉤子
npm 腳本有pre和post兩個鉤子
例子
# package.json "prebuild": "echo I run before the build script", "build": "cross-env NODE_ENV=production webpack", "postbuild": "echo I run after the build script", # 命令行 $ npm run build # 等同于執(zhí)行 $ npm run prebuild && npm run build && npm run postbuild
自定義的腳本命令也可以加上pre和post鉤子。比如,myscript這個腳本命令,也有premyscript和postmyscript鉤子。不過,雙重的pre和post無效,比如prepretest和postposttest是無效的。
默認(rèn)的鉤子
prepublish,postpublish preinstall,postinstall preuninstall,postuninstall preversion,postversion pretest,posttest prestop,poststop prestart,poststart prerestart,postrestart
npm_lifecycle_event變量 (返回當(dāng)前正在運行的腳本名稱,pretest、test、posttest)
#利用這個變量,在同一個腳本文件里面,為不同的npm scripts命令編寫代碼 const TARGET = process.env.npm_lifecycle_event; if (TARGET === "test") { console.log(`Running the test task!`); } if (TARGET === "pretest") { console.log(`Running the pretest task!`); } if (TARGET === "posttest") { console.log(`Running the posttest task!`); }
簡寫注意,prepublish這個鉤子不僅會在npm publish命令之前運行,還會在npm install(不帶任何參數(shù))命令之前運行。這種行為很容易讓用戶感到困惑,所以 npm 4 引入了一個新的鉤子prepare,行為等同于prepublish,而從 npm 5 開始,prepublish將只在npm publish命令之前運行。
npm start是npm run start的簡寫
npm stop是npm run stop的簡寫
npm test是npm run test的簡寫
npm restart是npm run stop && npm run restart && npm run start的簡寫
執(zhí)行順序
1 prerestart
2 prestop
3 stop
4 poststop
5 restart
6 prestart
7 start
8 poststart
9 postrestart
通過npm_package_前綴,npm 腳本可以拿到package.json里面的字段
(如果是 Bash 腳本,可以用$npm_package_前綴取值)
// package.json { "name": "foo", "version": "1.2.5", "config" : { "port" : "8080" }, "scripts": { "view": "node view.js", "start" : "node server.js" } } // view.js console.log(process.env.npm_package_name); // foo console.log(process.env.npm_package_version_view); // node view.js
npm 腳本還可以通過npm_config_前綴,拿到 npm 的配置變量,即npm config get xxx命令返回的值。
比如,當(dāng)前模塊的發(fā)行標(biāo)簽,可以通過npm_config_tag取到。
"view": "echo $npm_config_tag",
注意 package.json里面的config對象,可以被環(huán)境變量覆蓋。
$ npm config set foo:port 80列出所有環(huán)境變量
"env": "env"常用腳本示例
// 刪除目錄 "clean": "rimraf dist/*", // 本地搭建一個 HTTP 服務(wù) "serve": "http-server -p 9090 dist/", // 打開瀏覽器 "open:dev": "opener http://localhost:9090", // 實時刷新 "livereload": "live-reload --port 9091 dist/", // 構(gòu)建 HTML 文件 "build:html": "jade index.jade > dist/index.html", // 只要 CSS 文件有變動,就重新執(zhí)行構(gòu)建 "watch:css": "watch "npm run build:css" assets/styles/", // 只要 HTML 文件有變動,就重新執(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",
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://hztianpu.com/yun/86874.html
摘要:例如現(xiàn)在的入門學(xué)習(xí)手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學(xué)習(xí)手記一,主要是介紹了的核心概念,是整個學(xué)習(xí)過程的基礎(chǔ)知識。新生成的類似如下入門學(xué)習(xí)手記因為生成的內(nèi)容過多,我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號:前端修煉之路,歡迎關(guān)注。 最近開始想要維護一個個人的公眾...
摘要:本節(jié)將學(xué)習(xí)是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令來強制安裝所有模塊,不管該模塊之前是否安裝過由于國內(nèi)墻的原因,使用安裝會非常緩慢,慢到想切,不過還好,我們可以使用淘寶提供的國內(nèi)鏡像進行下載。 本節(jié)將學(xué)習(xí) Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。 一、句法強大的樣式表Sass Sass 是一種可用于編寫CSS的語言...
摘要:具體來說,包管理器就是可以通過命令行,幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級,這樣就不用手工復(fù)制和更新庫。現(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學(xué)習(xí)HTML基礎(chǔ) HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上: 學(xué)習(xí)HTML基礎(chǔ),了解如何編寫語義HTML 理解如何把網(wǎng)頁分...
摘要:具體來說,包管理器就是可以通過命令行,幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級,這樣就不用手工復(fù)制和更新庫?,F(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學(xué)習(xí)HTML基礎(chǔ) HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上: 學(xué)習(xí)HTML基礎(chǔ),了解如何編寫語義HTML 理解如何把網(wǎng)頁分...
閱讀 4218·2021-10-08 10:04
閱讀 3173·2021-08-11 11:20
閱讀 2934·2021-07-25 21:37
閱讀 2764·2019-08-30 12:44
閱讀 2413·2019-08-30 11:12
閱讀 1389·2019-08-26 13:45
閱讀 2443·2019-08-26 11:53
閱讀 3138·2019-08-26 11:32