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