国产av小电影,99c视频色欲在线

前端腳手架的執(zhí)行原理

2021-9-30 前端達(dá)人

最近收到幾位老師留言，提到一些腳手架相關(guān)的問題，跟著自己淺顯的理解，以vue腳手架在windows系統(tǒng)上的執(zhí)行為例做個(gè)分析。

正題之前，先說幾個(gè)概念

腳手架的本質(zhì)：運(yùn)行在操作系統(tǒng)上node客戶端里的可執(zhí)行程序。

腳手架做了哪些工作？一般腳手架的工作內(nèi)容主要包括三方面：

創(chuàng)建項(xiàng)目+通用代碼：埋點(diǎn)、http請求、工具方法、組件庫。
git操作：創(chuàng)建倉庫、代碼沖突、遠(yuǎn)程代碼同步、創(chuàng)建版本、發(fā)布打tag。
構(gòu)建+發(fā)布上線：依賴安裝和構(gòu)建、資源上傳CDN、域名綁定、測試\正是服務(wù)器。

腳手架給我們帶來哪些好處？提升前端研發(fā)效能?。ň瓦@么一句空話~~）從其為我們帶來的最終體驗(yàn)上來講，是實(shí)現(xiàn)研發(fā)過程的：

自動(dòng)化：項(xiàng)目重復(fù)代碼的copy、git操作、發(fā)布上線操作；
標(biāo)準(zhǔn)化：項(xiàng)目創(chuàng)建、git flow、發(fā)布流程、回滾流程；
數(shù)據(jù)化：使研發(fā)過程系統(tǒng)化、數(shù)據(jù)化、使得研發(fā)過程可量化。

腳手架的命令執(zhí)行：

vue create csjName –g

vue 是腳手架名稱
create 是command，腳手架中已注冊的命令
csjName 是params，命令的參數(shù)
–g 是options，命令的配置
一般options后也會(huì)有參數(shù)，我們稱之為配置參數(shù)，上面命令其實(shí)是省略了true
```
vue create csjName –g true
```

下面說一下vue腳手架的執(zhí)行過程

環(huán)境要求，已安裝node

先來思考一個(gè)問題：

我們安裝vue腳手架時(shí)，安裝的是@vue/cli

npm install @vue/cli –g

為什么創(chuàng)建項(xiàng)目的時(shí)候用的卻是vue

vue create projectName

咱們先看 npm install @vue/cli –g命令完成拉資源后，在操作系統(tǒng)中都做了什么。

命令執(zhí)行完成后，咱們切換到D:\mysoft\node\node_global（這個(gè)是自己安裝node時(shí)設(shè)置的全局npm包的安裝路徑，并且已配置到環(huán)境變量中，不清楚的老師可以去熟悉一下node的安裝教程），發(fā)現(xiàn)此路徑下已經(jīng)生成了一個(gè)cmd命令vue.cmd，因?yàn)榇寺窂揭雅渲玫江h(huán)境變量中，所以在cmd我們必然可以直接輸入vue來執(zhí)行vue.cmd。

那么vue.cmd文件中又執(zhí)行了什么？打開vue.cmd

可以看到，其實(shí)它是去調(diào)用了vue腳手架資源路徑下的vue.js文件

正如我們在這個(gè)路徑下執(zhí)行

node vue.js create csjName

是一樣的。腳手架的命令及其參數(shù)的注冊與解析都在此文件中完成。具體的代碼邏輯不再深入講了，因?yàn)槲乙矝]看。。。。。

再來思考個(gè)問題，在完成腳手架資源的下載后，為什么會(huì)在D:\mysoft\node\node_global下自動(dòng)生成一個(gè)vue.cmd？我們能不能自定義這個(gè)腳手架的名字？

其實(shí)每個(gè)腳手架都是npm項(xiàng)目，vue.cmd是在此npm項(xiàng)目的package.json中配置的，我們也可以對其自定義修改。

欲修改腳手架名稱，直接去D:\mysoft\node\node_global下重命名vue.cmd即可。如果是自己的腳手架，可在npm項(xiàng)目內(nèi)的package.json中通過上述配置，指定腳手架的名稱。

補(bǔ)充

另外在linux或mac系統(tǒng)中，其實(shí)node\node_global下并未生成vue.cmd，而是生成了一個(gè)叫做vue軟鏈接，并且鏈向了node_global\node_modules\@vue\cli下的vue.js。

而且在linux和mac系統(tǒng)中，并未使用node vue.js，而是直接執(zhí)行了vue.js那是因?yàn)樵趘ue.js頂部已通過Shebang聲明當(dāng)前文件默認(rèn)使用系統(tǒng)中環(huán)境變量/usr/bin/env 下的node解釋器執(zhí)行。此語法在windows系統(tǒng)中無效。

以上是對vue腳手架在windows中執(zhí)行過程的淺顯理解。不到之處，還請指正~~

最后安利一個(gè)自己已發(fā)布的npm項(xiàng)目csjtools，旨在打造一個(gè)前端通用的工具庫，就是自己平常封裝的js工具函數(shù)，如對timeout的異步封裝、對storage的面向?qū)ο蟮姆庋b、對日期格式的轉(zhuǎn)換、還有對象之間的深比較等，目前工具還不夠豐富，歡迎大家一起使用&完善，一個(gè)人的力量很小~~