npm run xxx 的时候发生了什么?(以npm run dev举例说明)

news2024/11/23 9:35:27

文章目录

  • 一、去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.coloradmin.cn/o/879101.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java springboot驾校管理系统

开发技术: SpringBootspringmvcMybitis-Puls mysql5.x html ajax数据交互 开发工具: idea或eclipse jdk1.8 maven (1) 管理员登陆 (2) 所有学员信息列表查询 (3)所有学生考试信息 (4)学员…

Datawhale Django入门组队学习Task01

Task01 一.创建虚拟环境 python -m venv django_learn (django_learn那里是自己定的环境名字) 之前一直用conda管理虚拟环境,没咋用过virtualenv,然后我的powershell之前也设置了默认启动了base环境,然后输入activat…

目标检测(Object Detection)

文章目录 1. 目标检测1.1 目标检测简要概述及名词解释1.2 IOU1.3 TP TN FP FN1.4 precision(精确度)和recall(召回率) 2. 边框回归Bounding-Box regression3. Faster R-CNN3.1 Faster-RCNN:conv layer3.2 Faster-RCNN&…

如何搭建个人邮件服务hmailserver并实现远程发送邮件

文章目录 1. 安装hMailServer2. 设置hMailServer3. 客户端安装添加账号4. 测试发送邮件5. 安装cpolar6. 创建公网地址7. 测试远程发送邮件8. 固定连接公网地址9. 测试固定远程地址发送邮件 hMailServer 是一个邮件服务器,通过它我们可以搭建自己的邮件服务,通过cpolar内网映射工…

Destination Host Unreachable

背景:物理机的IP地址是192.168.31.189,虚拟机的IP地址是192.168.194.130 物理机ping得通虚拟机 虚拟机ping得通外网 可是虚拟机ping不通物理机 1、报错信息 Destination Host Unreachable 2、原因 用route -n命令查看路由表发现192.168.194.0没有走网…

设计HTML5图像和多媒体

在网页中的文本信息直观、明了,而多媒体信息更富内涵和视觉冲击力。恰当使用不同类型的多媒体可以展示个性,突出重点,吸引用户。在HTML5之前,需要借助插件为网页添加多媒体,如Adobe Flash Player、苹果的QuickTime等。…

R语言画图的-- ggplot2(实现图例的精细修改)

文章目录 1. 图的精确修改theme函数实现图的精细修改实现一页多图具体作图中的参数修改(某些特殊的参数)柱状图的参数修改 ggplot2是R中用来作图的很强的包,但是其用法比较大且各种参数比较复杂,我自己使用的时候还经常需要查阅一些关键参数等&#xff0…

Stable Diffusion + Deform制作指南

1.安装sd以及deform插件,更新后记得重启 需要安装ffmpeg https://ffmpeg.org/download.html 选择对应版本然后安装 如果是windows需要解压后将ffmpeg的bin目录配置在电脑的环境变量里面。 2.准备一张初始开始图片 3.填写参数,这里面参数要注意,宽高一定是32的倍数。如果填写…

R语言生存分析算法的简单组合

library(survival) library(randomForestSRC)# 生成模拟数据 set.seed(123) n <- 200 time <- rexp(n, rate 0.1) status <- rbinom(n, size 1, prob 0.7) var1 <- rnorm(n) var2 <- rnorm(n) var3 <- rnorm(n) data1 <- data.frame(time time, statu…

「网络」网络安全必须知道的19个知识分享

一、防火墙&#xff08;Firewall&#xff09; 定义&#xff1a;都知道防火墙是干什么用的&#xff0c;但我觉得需要特别提醒一下&#xff0c;防火墙抵御的是外部的攻击&#xff0c;并不能对内部的病毒 ( 如ARP病毒 ) 或攻击没什么太大作用。 功能 : 防火墙的功能主要是两个网…

『C语言初阶』第九章 -结构体

前言 今天小羊又来给铁汁们分享关于C语言的结构体&#xff0c;在C语言中&#xff0c;结构体类型属于一种构造类型&#xff08;其他的构造类型还有&#xff1a;数组类型&#xff0c;联合类型&#xff09;&#xff0c;今天我们主要简单了解一下结构体。 一、结构体是什么&#x…

02.FFMPEG的安装和添加硬件加速自编译

说一个极其郁闷的事情&#xff0c;就在昨天收到3399的一块板子后&#xff0c;往电脑上面一插&#xff0c;然后悲剧的事情就发生了&#xff0c;我的电脑蓝屏重启了&#xff0c;这下好了&#xff0c;我写到一半的帖子也不见了&#xff0c;我的SSH里面的记录全部消失了&#xff0c…

一文解析超标量处理器

一、引言 处理器&#xff08;central process unit,简称CPU&#xff09;是手机的核心部件&#xff0c;其主要功能是取指令并译码执行。CPU主要包括控制器和运算器两个部件&#xff0c;它对在手机中的所有硬件资源&#xff08;如存储器&#xff0c;输入输出单元&#xff09;进行…

等保案例 1

用户简介 吉林省人力资源和社会保障厅&#xff08;简称“吉林省人社厅”&#xff09;响应《网络安全法》的建设要求&#xff0c;为了向吉林省人民提供更好、更快、更稳定的信息化服务&#xff0c;根据《网络安全法》和等级保护2.0相关标准&#xff0c;落实网络安全与信息化建设…

AD20之PCB设计

一、原理图 1、CTRL鼠标滚轮 图纸的放大缩小 2、修改栅格颜色 3、选择图纸尺寸 4、编译原理图 选中项目右键 5、编译原理图后 出现原理图中所使用的元器件 或错误信息 元器件 编译原理图报错 6、编译原理图库后 选中右侧栏中元器件 可进行添加 或删除库中元器件 7、去…

欧拉OS 使用 CentOS 7 yum repo

一、下载CentOS的repo的yum文件 任何基于CentOS的yum的repo 的url是这样的&#xff1a; 但欧拉OS输出这个变量为&#xff1a;openEuler 20.03 (LTS-SP3) 那明显欧拉想要使用这个yum的url找不到这个版本&#xff0c; 所以直接讲这个变量替换为 7, Centos 7的7 然后执行&…

C进阶(1/7)——数据在内存中的存储

目录 前言&#xff1a; 一.数据类型介绍 类型基本归类&#xff1a; 整型家族&#xff1a; 浮点数家族&#xff1a; 构造类型&#xff1a; ​指针类型&#xff1a; 空类型&#xff1a; 二.整型在内存中的存储 1.原码&#xff0c;反码&#xff0c;补码 2.大小端介绍 3.练…

web基础入门和php语言基础入门 二

web基础入门和php语言基础入门 二 MySQL入门-续MySQL之数据查询操作MySQL其他知识点 php语言基础入门认识PHPPHP的工作流程安装PHP环境认识一个PHP程序PHP基础知识点进入正题 PHP与WEB交互PHP与MySQL交互总结 MySQL入门-续 MySQL之数据查询操作 WHERE 子句&#xff0c;条件限…

面向对象设计与分析40讲(20)消息驱动编程和事件驱动编程模型

文章目录 消息驱动编程事件驱动编程消息驱动和事件驱动的区别 消息驱动编程 消息驱动是一种编程模型&#xff0c;它基于事件和消息的传递来驱动程序的执行流程。在消息驱动的模型中&#xff0c;系统中的各个组件&#xff08;或对象&#xff09;通过发送和接收消息进行通信和协…

如何基于 ACK Serverless 快速部署 AI 推理服务

作者&#xff1a;元毅 随着 AI 浪潮的到来&#xff0c;各种 AI 应用层出不穷&#xff0c;众所周知 AI 应用对 GPU 资源强烈依赖&#xff0c;但 GPU 很昂贵&#xff0c;如何降低 GPU 资源使用成本成为用户首要问题。而 AI 与 Serverless 技术结合&#xff0c;完全可以达到按需使…