他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

前端腳手架的執行原理

2021-9-30    前端達人

最近收到幾位老師留言,提到一些腳手架相關的問題,跟著自己淺顯的理解,以vue腳手架在windows系統上的執行為例做個分析。

正題之前,先說幾個概念

腳手架的本質:運行在操作系統上node客戶端里的可執行程序。

腳手架做了哪些工作?一般腳手架的工作內容主要包括三方面:

  1. 創建項目+通用代碼: 埋點、http請求、工具方法、組件庫。
  2. git操作: 創建倉庫、代碼沖突、遠程代碼同步、創建版本、發布打tag。
  3. 構建+發布上線: 依賴安裝和構建、資源上傳CDN、域名綁定、測試\正是服務器。

腳手架給我們帶來哪些好處?提升前端研發效能!(就這么一句空話~~)從其為我們帶來的最終體驗上來講,是實現研發過程的:

  1. 自動化:項目重復代碼的copy、git操作、發布上線操作;
  2. 標準化:項目創建、git flow、發布流程、回滾流程;
  3. 數據化:使研發過程系統化、數據化、使得研發過程可量化。

腳手架的命令執行

vue create csjName –g
  1. vue 是腳手架名稱
  2. create 是command,腳手架中已注冊的命令
  3. csjName 是params,命令的參數
  4. –g 是options,命令的配置
  5. 一般options后也會有參數,我們稱之為配置參數,上面命令其實是省略了true
    vue create csjName –g true

下面說一下vue腳手架的執行過程

環境要求,已安裝node

先來思考一個問題:

我們安裝vue腳手架時,安裝的是@vue/cli

npm install @vue/cli –g

為什么創建項目的時候用的卻是vue

vue create projectName

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

命令執行完成后,咱們切換到D:\mysoft\node\node_global(這個是自己安裝node時設置的全局npm包的安裝路徑,并且已配置到環境變量中,不清楚的老師可以去熟悉一下node的安裝教程),發現此路徑下已經生成了一個cmd命令vue.cmd,因為此路徑已配置到環境變量中,所以在cmd我們必然可以直接輸入vue來執行vue.cmd。

那么vue.cmd文件中又執行了什么?打開vue.cmd

可以看到,其實它是去調用了vue腳手架資源路徑下的vue.js文件

正如我們在這個路徑下執行

node vue.js create csjName

是一樣的。腳手架的命令及其參數的注冊與解析都在此文件中完成。具體的代碼邏輯不再深入講了,因為我也沒看。。。。。

再來思考個問題,在完成腳手架資源的下載后,為什么會在D:\mysoft\node\node_global下自動生成一個vue.cmd?我們能不能自定義這個腳手架的名字?

其實每個腳手架都是npm項目,vue.cmd是在此npm項目的package.json中配置的,我們也可以對其自定義修改。

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

補充

另外在linux或mac系統中,其實node\node_global下并未生成vue.cmd,而是生成了一個叫做vue軟鏈接,并且鏈向了node_global\node_modules\@vue\cli下的vue.js。

而且在linux和mac系統中,并未使用node vue.js,而是直接執行了vue.js那是因為在vue.js頂部已通過Shebang聲明當前文件默認使用系統中環境變量/usr/bin/env 下的node解釋器執行。此語法在windows系統中無效。

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

最后安利一個自己已發布的npm項目csjtools,旨在打造一個前端通用的工具庫,就是自己平常封裝的js工具函數,如對timeout的異步封裝、對storage的面向對象的封裝、對日期格式的轉換、還有對象之間的深比較等,目前工具還不夠豐富,歡迎大家一起使用&完善,一個人的力量很小~~

npm install csjtools -g 


藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

轉自:csdn
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://m.ssll180.com

存檔