npm run xxx 的時候發生了什么?(以npm run dev舉例說明)

文章目錄

  • 一、去package.json尋找scripts對應的命令
  • 二、去node_modules尋找vue-cli-service
  • 三、從package-lock.json獲取.bin的軟鏈接
    • 1. bin目錄下的那些軟連接存在于項目最外層的package-lock.json文件中。
    • 2.vue-cli-service文件的作用
    • 3.npm install 的作用
  • 總結


一、去package.json尋找scripts對應的命令

比如在npm run dev的時候,首先會去項目的package.json文件里找scripts 里找對應的 dev ,然后執行 dev 的命令。
也就是說,啟動vue項目 npm run dev的時候,實際上就是執行了vue-cli-service serve 這條命令。

"scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build",
},

問題1:為什么不直接執行vue-cli-service serve命令呢?
因為操作系統中沒有vue-cli-service 這條命令。
在這里插入圖片描述

二、去node_modules尋找vue-cli-service

問題2:既然vue-cli-service serve這條指令不存在操作系統中,為什么執行npm run dev的時候,也就是執行了vue-cli-service serve 能成功,并且不報錯呢?
(1)首先,大家都知道,我們通過npm i 安裝依賴。例如 npm i @vue/cli-service,npm 在 安裝這個依賴的時候,就會node_modules/.bin/ 目錄中創建 好vue-cli-service 為名的幾個可執行文件了。
(2).bin 目錄不是任何一個 npm 包。目錄下的文件,表示一個個軟鏈接,打開文件可以看到文件頂部寫著 #!/bin/sh ,表示這是一個腳本。所以當使用 npm run dev 執行 vue-cli-service serve 時,雖然沒有安裝 vue-cli-service的全局命令,但是 npm 會到 ./node_modules/.bin 中找到 vue-cli-service 文件作為 腳本來執行,則相當于執行了 ./node_modules/.bin/vue-cli-service serve。
在這里插入圖片描述

三、從package-lock.json獲取.bin的軟鏈接

問題3:.bin 目錄下的文件表示軟連接,那這個bin目錄下的那些軟連接文件是哪里來的?它又是怎么知道這條軟連接是執行哪里的呢?

1. bin目錄下的那些軟連接存在于項目最外層的package-lock.json文件中。

從 package-lock.json 中可知,當我們npm install 整個新建的vue項目的時候,npm 將 bin/vue-cli-service.js 作為 bin 聲明了。所以在 npm install 時,npm 讀到該配置后,就將該文件軟鏈接到 ./node_modules/.bin 目錄下。
在這里插入圖片描述

2.vue-cli-service文件的作用

node_modelues --> .bin --> vue-cli-service 中將npm 還會自動把node_modules/.bin加入$PATH,這樣就可以直接作為命令運行依賴程序和開發依賴程序,不用全局安裝了。
在這里插入圖片描述

3.npm install 的作用

npm install 的時候,npm 就幫我們把這種軟連接配置好了,其實這種軟連接相當于一種映射,執行npm run dev 的時候,就會到 node_modules/bin中找對應的映射文件,然后再找到相應的js文件來執行。


總結

npm install 時,npm 讀到該配置后,就將該文件軟鏈接到 ./node_modules/.bin 目錄下,而 npm 還會自動把node_modules/.bin加入$PATH,這樣就可以直接作為命令運行依賴程序和開發依賴程序,不用全局安裝了。
然后在運行npm run dev 的時候,dev會去package.json尋找scripts對應的命令,這個命令會執行在node_modules --> bin中由npm i 映射的軟鏈接,然后再找到相應的js文件來執行。 也就是說 npm i 的時候,npm 就幫我們把這種軟連接配置好了

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/42281.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/42281.shtml
英文地址,請注明出處:http://en.pswp.cn/news/42281.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Google API實戰與操作

Google api實戰與操作 一. Google API 權限配置二. 操作API2.1 引入依賴2.2 導入代碼 Google官網 實現一套用java程序控制GoogleAPI實現自動生成監控日報等功能,具體能操作Gsheet及document 一. Google API 權限配置 打開上面官網,新建項目 啟用API 搜索sheet及document …

【山河送書第七期】:《強化學習:原理與Python實戰》揭秘大模型核心技術RLHF!

《強化學習:原理與Python實戰》揭秘大模型核心技術RLHF! 一圖書簡介二RLHF是什么?三RLHF適用于哪些任務?四RLHF和其他構造獎勵模型的方法相比有何優劣?五什么樣的人類反饋才是好反饋?六如何減小人類反饋帶來…

LVGL圖層的介紹

一.UI界面顯示的圖層 在lvgl開發的過程中,UI界面的顯示都是位于lv_sct_act()圖層 二.彈窗顯示 lvgl開發過程中,有些窗口有可能在任何時候顯示,比如錯誤信息彈窗,外部觸發的一些中斷。 這個時候,這些窗口不能建立在lv_s…

web前端開發基礎入門html5+css3+js學習筆記(一)

目錄 1.第一個前端程序2.前端工具的選擇與安裝3.VSCode開發者工具快捷鍵4.HTML5簡介與基礎骨架4.1 HTML5的DOCTYPE聲明4.2 HTML5基本骨架4.2.1 html標簽4.2.2 head標簽4.2.3 body標簽4.2.4 title標簽4.2.5 meta標簽 5.標簽之標題5.1 快捷鍵5.1 標題標簽位置擺放 6.標簽之段落、…

LeetCode每日一題——2682. 找出轉圈游戲輸家

n 個朋友在玩游戲。這些朋友坐成一個圈&#xff0c;按 順時針方向 從 1 到 n 編號。從第 i 個朋友的位置開始順時針移動 1 步會到達第 (i 1) 個朋友的位置&#xff08;1 < i < n&#xff09;&#xff0c;而從第 n 個朋友的位置開始順時針移動 1 步會回到第 1 個朋友的位…

leetcode 377. 組合總和 Ⅳ

2023.8.17 本題屬于完全背包問題&#xff0c;乍一看和昨天那題 零錢兌換II 類似&#xff0c;但細看題目發現&#xff1a;今天這題是排列問題&#xff0c;而“零錢兌換II”是組合問題。排列問題強調順序&#xff0c;而組合順序不強調順序。 這里先說個結論&#xff1a;先遍歷物品…

并查集、樹狀數組

并查集、樹狀數組、線段樹 并查集樹狀數組樹狀數組1 (單點修改&#xff0c;區間查詢)樹狀數組2 (單點查詢&#xff0c;區間修改) 并查集 【模板】并查集 題目描述 如題&#xff0c;現在有一個并查集&#xff0c;你需要完成合并和查詢操作。 輸入格式 第一行包含兩個整數 …

Scala中的Either的用法

在 Scala 中&#xff0c;Either 是一種表示兩種可能值的數據類型。它可以用來處理函數可能返回的兩種不同類型的結果&#xff0c;通常用于錯誤處理或者結果分支情況。Either 有兩個子類&#xff1a;Left 和 Right&#xff0c;其中 Left 通常用于表示錯誤或異常情況&#xff0c;…

1.物聯網LWIP網絡,TCP/IP協議簇

一。TCP/IP協議簇 1.應用層&#xff1a;FTP&#xff0c;HTTP&#xff0c;Telent&#xff0c;DNS&#xff0c;RIP 2.傳輸層&#xff1a;TCP&#xff0c;UDP 3.網絡層&#xff1a;IPV4&#xff0c;IPV6&#xff0c;OSPF&#xff0c;EIGRP 4.數據鏈路層&#xff1a;Ethernet&#…

YOLOv5改進系列(21)——替換主干網絡之RepViT(清華 ICCV 2023|最新開源移動端ViT)

【YOLOv5改進系列】前期回顧: YOLOv5改進系列(0)——重要性能指標與訓練結果評價及分析 YOLOv5改進系列(1)——添加SE注意力機制 YOLOv5改進系列(2

兩階段提交:詳解數據庫宕機引起的主從不一致問題、redolog與binlog的兩階段提交

0、基礎知識and問題 從基礎上我們了解&#xff1a; &#xff08;1&#xff09;redolog作為數據庫保證持久化的日志&#xff0c;在update事務提交后就會按一定的策略刷入磁盤中&#xff0c;在刷入后&#xff0c;即使數據庫斷電宕機&#xff0c;mysql也能從redolog中恢復數據到磁…

Matplotlib數據可視化(六)

目錄 1.繪制概率圖 2.繪制雷達圖 3.繪制流向圖 4.繪制極坐標圖 5.繪制詞云圖 1.繪制概率圖 from scipy.stats import norm fig,ax plt.subplots() plt.rcParams[font.family] [SimHei] np.random.seed() mu 100 sigma 15 x musigma*np.random.randn(437) num_bins …

【騰訊云 Cloud Studio 實戰訓練營】在線 IDE 編寫 canvas 轉換黑白風格頭像

關于 Cloud Studio Cloud Studio 是基于瀏覽器的集成式開發環境(IDE)&#xff0c;為開發者提供了一個永不間斷的云端工作站。用戶在使用Cloud Studio 時無需安裝&#xff0c;隨時隨地打開瀏覽器就能在線編程。 Cloud Studio 作為在線IDE&#xff0c;包含代碼高亮、自動補全、Gi…

winform 設置畫刷半透明

使用solidBrush新建畫刷&#xff0c;定義畫刷的顏色為透明色 Brush b new SolidBrush(Color.FromArgb(50, Color.Green)); 這里的50是透明度的設置&#xff0c;范圍從0-255&#xff1b; 0:無顏色 255:不透明 轉&#xff1a;c# 設置Brush 畫刷 透明_solidcolorbrush 透明色_…

git-fatal: No url found for submodule path ‘packages/libary‘ in .gitmodules

文章目錄 前言一、git submodule功能使用二、錯誤信息&#xff1a;三、解決方法&#xff1a;四、.gitmodules配置文件&#xff1a;總結 前言 最近在做vue項目&#xff0c;因為項目比較復雜&#xff0c;把功能拆分成很多子模塊&#xff0c;我們使用Git的submodule功能。遇到錯誤…

使用libvncserver庫快速搭建VNC服務端

文章目錄 VNC是什么libvncserver的優點和缺點構建libvncserver使用libvncserver搭建VNCServerX11模擬鼠標鍵盤操作libvncserver中處理鼠標鍵盤消息 VNC是什么 VNC(Virtual Network Computing)是一種使用遠程幀緩沖協議(RFB)的屏幕分享及遠程操作軟件。VNC的服務端可以通過RFP協…

Linux開機啟動程序添加root權限

Linux添加開機啟動程序 Debain、Ubuntu系列Linux開機之后會執行/etc/rc.local文件中的命令&#xff0c;所以&#xff0c;如果是想添加登陸用戶所具有權限的操作&#xff0c;可以在文件中exit 0之前添加開機自動執行的腳本命令。或者將執行腳本的權限修改為當前登錄用戶具有執行…

基于R語言APSIM模型進階應用與參數優化、批量模擬

隨著數字農業和智慧農業的發展&#xff0c;基于過程的農業生產系統模型在模擬作物對氣候變化的響應與適應、農田管理優化、作物品種和株型篩選、農田固碳和溫室氣體排放等領域扮演著越來越重要的作用。APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物生…

moodle單點登陸

在moodle/login添加sso.php <?phprequire(../config.php); require_once(lib.php);if($_SERVER[REQUEST_METHOD]==GET){$tokenId=$_GET[tokenId]; }else{$tokenId="fail";

C++新經典03--共用體、枚舉類型與typedef

共用體 共用體&#xff0c;也叫聯合&#xff0c;有時候需要把幾種不同類型的變量存放到同一段內存單元&#xff0c;例如&#xff0c;把一個整型變量、一個字符型變量、一個字符數組放在同一個地址開始的內存單元中。這三個變量在內存中占的字節數不同&#xff0c;但它們都從同…