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和其他构造奖励模型的方法相比有何优劣?五什么样的人类反馈才是好反馈?六如何减小人类反馈带来…

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 377. 组合总和 Ⅳ

2023.8.17 本题属于完全背包问题,乍一看和昨天那题 零钱兑换II 类似,但细看题目发现:今天这题是排列问题,而“零钱兑换II”是组合问题。排列问题强调顺序,而组合顺序不强调顺序。 这里先说个结论:先遍历物品…

并查集、树状数组

并查集、树状数组、线段树 并查集树状数组树状数组1 (单点修改,区间查询)树状数组2 (单点查询,区间修改) 并查集 【模板】并查集 题目描述 如题,现在有一个并查集,你需要完成合并和查询操作。 输入格式 第一行包含两个整数 …

1.物联网LWIP网络,TCP/IP协议簇

一。TCP/IP协议簇 1.应用层:FTP,HTTP,Telent,DNS,RIP 2.传输层:TCP,UDP 3.网络层:IPV4,IPV6,OSPF,EIGRP 4.数据链路层:Ethernet&#…

YOLOv5改进系列(21)——替换主干网络之RepViT(清华 ICCV 2023|最新开源移动端ViT)

【YOLOv5改进系列】前期回顾: YOLOv5改进系列(0)——重要性能指标与训练结果评价及分析 YOLOv5改进系列(1)——添加SE注意力机制 YOLOv5改进系列(2

两阶段提交:详解数据库宕机引起的主从不一致问题、redolog与binlog的两阶段提交

0、基础知识and问题 从基础上我们了解: (1)redolog作为数据库保证持久化的日志,在update事务提交后就会按一定的策略刷入磁盘中,在刷入后,即使数据库断电宕机,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),为开发者提供了一个永不间断的云端工作站。用户在使用Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。 Cloud Studio 作为在线IDE,包含代码高亮、自动补全、Gi…

C++新经典03--共用体、枚举类型与typedef

共用体 共用体,也叫联合,有时候需要把几种不同类型的变量存放到同一段内存单元,例如,把一个整型变量、一个字符型变量、一个字符数组放在同一个地址开始的内存单元中。这三个变量在内存中占的字节数不同,但它们都从同…

idea 转换为 Maven Project 的方法

选项: Add as Maven Project

通过TightVNC远程访问MacOS

目录 一、下载 TightVNC 下载链接:https://www.tightvnc.com/ 下载后按步骤进行安装,安装完成后安装目录如下: 运行 tvnviewer.exe,输入远程 IP,点击【connect】: 输入密码,点击【OK】后即可远…

Matlab中图例的位置(图例放在图的上方、下方、左方、右方、图外面)等

一、图例默认位置 默认的位置在NorthEast r 10; a 0; b 0; t0:0.1:2.1*pi; xar*cos(t); ybr*sin(t); A1plot(x,y,r,linewidth,4);%圆 hold on axis equal A2plot([0 0],[1 10],b,linewidth,4);%直线 legend([A1,A2],圆形,line)二、通过Location对legend的位置进行改变 变…

企业电子招投标采购系统源码之电子招投标的组成 tbms

​ 功能模块: 待办消息,招标公告,中标公告,信息发布 描述: 全过程数字化采购管理,打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力,为…

设计模式-观察者模式(观察者模式的需求衍变过程详解,关于监听的理解)

目录 前言概念你有过这样的问题吗? 详细介绍原理:应用场景: 实现方式:类图代码 问题回答监听,为什么叫监听,具体代码是哪观察者模式的需求衍变过程观察者是为什么是行为型 总结: 前言 在软件设计…

【C++类和对象】类有哪些默认成员函数呢?(下)

文章目录 一、类的6个默认成员函数二、日期类的实现2.1 运算符重载部分2.2 日期之间的运算2.3 整体代码1.Date.h部分2. Date.cpp部分 三. const成员函数四. 取地址及const取地址操作符重载扩展内容 总结 ヾ(๑╹◡╹)ノ" 人总要为过去的懒惰而付出代价ヾ(๑╹◡…

2011年下半年 软件设计师 上午试卷2

博主介绍:✌全网粉丝3W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验…

数据包如何游走于 Iptables 规则之间?

在前文《Linux路由三大件》中,我们提到了 iptables 可以修改数据包的特征从而影响其路由。这个功能无论是传统场景下的 防火墙,还是云原生场景下的 服务路由(k8s service)、网络策略(calico network policy) 等都有依赖。 虽然业…

ceph数据分布

ceph的存储是无主结构,数据分布依赖client来计算,有两个条主要路径。 1、数据到PG 2、PG 到OSD 有两个假设: 第一,pg的数量稳定,可以认为保持不变; 第二, OSD的数量可以增减,OSD的…