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.mzph.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;但它们都从同…