npm scripts的生命週期管理

2021-09-20 04:56:20 字數 1670 閱讀 9824

我們平時閱讀一些開源專案，可能會發現有些專案的package.json裡的scripts區域定義的指令碼很複雜，令人眼花繚亂。

其實這些指令碼是有規律可循的。讓我們從最簡單的乙個例子開始學習。

新建乙個空資料夾，執行命令npm init，會自動在該資料夾下生成乙個package.json。

這個init其實是乙個嚮導，會針對package.json裡待生成的每乙個字段詢問您想填什麼值。一路回車，使用預設值即可。

自動生成的package.json內容如下。

我們現在對這個package.json進行少量修改，以此來學習scripts的生命週期管理(lifecycle management)。

,


"author": "",


"license": "isc"


}
重點看第9行～第11行，意思就是當npm執行命令時，如果執行到名為start的生命週期事件(lifecycle event)，則執行nodejs的命令node example.js，如果執行到名為prestart的生命週期事件, 則執行nodejs命令node example.js，對於poststart也同理。

然後我們再來編寫example.js。為了簡單起見，用example.js同時響應prestart, start和poststart三個事件，因此在example.js裡需要判斷當該檔案執行時，到底所處哪個生命週期事件。這個可以用環境變數process.env.npm_lifecycle_event獲得：

const environment = process.env.npm_lifecycle_event;


if (environment === "build") 


if ( environment === "dev") 


if ( environment === "prestart") 


if ( environment === "poststart") 


if ( environment === "start")
現在執行命令列npm start，可以看到依次執行了事件prestart->start->poststart對應的script。

React 生命週期 生命週期方法

生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...

actived生命週期 Vuejs 生命週期

每個 vue 例項在被建立時都要經過一系列的初始化過程。如需要設定資料監聽 編譯模板 將例項掛載到 dom 並在資料變化時更新 dom 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的 的機會。乙個 vue 例項 我們建立乙個 vue 例項，並在每個階段驗證 ...

vue的生命週期，什麼是生命週期

簡而言之 建立前 後,載入前 後，更新前 後，銷毀前 後 beforecreate 建立前 在資料觀測和初始化事件還未開始 created 建立後 完成資料觀測，屬性和方法的運算，初始化事件 beforemount 載入前 在掛載開始之前被呼叫，相關的render函式首次被呼叫。mounted 載入...