npm run dev命令的执行顺序和原理

当我们在开发vue、react等项目的时候经常会用npm run *命令,那么当我们执行这个命令的时候具体都做了些什么呢?接下来我们就来详细探索一下

当执行npm run dev命令时,npm会按照以下步骤进行操作:

1. 查找并执行脚本:

npm首先会在项目的package.json文件中查找scripts字段下的dev属性,并找到与之对应的脚本命令。这意味着,你需要确保在执行npm run dev命令时,你处于正确的目录中,即package.json文件所在的目录。
例如,如果package.json文件中有如下的配置:

{"scripts": {"dev": "node server.js"}
}
   执行npm run dev将会在当前目录下启动一个Node.js服务器,并执行server.js文件。

2. 检查依赖:

在执行脚本之前,npm会检查项目中是否已安装了所有必要的依赖项。如果依赖项不存在,npm会尝试自动安装package.json中列出的依赖项。

3. 执行命令:

一旦依赖项安装完成或确认已存在,npm将执行dev属性中指定的脚本命令。这可以是一个脚本、一个可执行文件或一个自定义的命令。
例如:

{"scripts": {"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve" }      
}

当我们运行npm run dev:h5命令的时候他会执行一下逻辑顺序:
1. npm run dev:h5:当你在命令行中执行这个命令时,npm 会查找 package.json 文件中 scripts 部分对应的
“dev:h5” 脚本,并准备执行它。
2. cross-env:首先,cross-env 会被调用,它会在node_modules/.bin的目录下查找该命令的可执行文件并且运行,如果没有找到,他会在全局的依赖包目录下查找。这个工具用于跨平台地设置环境变量。它确保NODE_ENV 和 UNI_PLATFORM 这两个环境变量能够在接下来的命令中正确使用,无论你在什么操作系统上。

  • NODE_ENV=development:cross-env 设置 NODE_ENV 环境变量的值为 development。这告诉应用或库当前处于开发模式。
  • UNI_PLATFORM=h5:同时,cross-env 设置 UNI_PLATFORM 环境变量的值为 h5。这是 Uni-app 的一个特定配置,用于指示接下来的命令是为 H5(网页)平台服务的。
  1. vue-cli-service uni-serve:在设置好环境变量之后,vue-cli-service uni-serve 命令被执行。这是 Vue CLI 的一个服务命令,通常该命令也是存放在node_modules/.bin目录下

4. 开发环境配置:

如果脚本中包含了环境变量的配置,例如通过-mode=development或读取.env.development文件来设置特定的开发环境变量,npm也会处理这些环境相关的配置。

5. 启动开发服务器:

在许多前端项目中,npm run dev会启动一个本地开发服务器,用于开发环境的代码调试。这通常包括监听指定目录下的源代码变化,并根据配置文件进行实时编译打包。

6. 文件监视与刷新:

npm还可能监视文件的变化,以便在文件改变时重新编译代码并刷新浏览器。

7. 执行其他任务:

根据项目的具体配置和开发环境的需要,npm可能会执行其他相关的构建任务,如处理图片、压缩代码等。

8. 启动浏览器实例:

最后,npm可能会启动一个浏览器实例,自动打开应用程序以进行预览。

总的来说,npm run dev命令会根据项目的配置执行一系列的操作,以启动并配置开发环境,使得开发者可以进行实时编码并立即看到结果。这些操作可能包括安装依赖、配置环境变量、启动开发服务器、监视文件变化、执行构建任务以及启动浏览器预览等。具体的操作取决于package.json文件中的配置以及项目的实际需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/751989.shtml

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

相关文章

Docker 安装 Skywalking以及UI界面

关于Skywalking 在现代分布式系统架构中,应用性能监控(Application Performance Monitoring, APM)扮演着至关重要的角色。本文将聚焦于一款备受瞩目的开源APM工具——Apache Skywalking,通过对其功能特性和工作原理的详细介绍&am…

【C++ leetcode 】双指针问题

1. 183. 移动零 题目 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 题目链接 . - 力扣(LeetCode) 画图 和 文字 分…

基于深度学习LSTM+NLP情感分析电影数据爬虫可视化分析推荐系统(深度学习LSTM+机器学习双推荐算法+scrapy爬虫+NLP情感分析+数据分析可视化)

文章目录 基于深度学习LSTMNLP情感分析电影数据爬虫可视化分析推荐系统(深度学习LSTM机器学习双推荐算法scrapy爬虫NLP情感分析数据分析可视化)项目概述深度学习长短时记忆网络(Long Short-Term Memory,LSTM)机器学习协…

golang常用库之-golang常用库之-ladon包 | 基于策略的访问控制

文章目录 golang常用库之-ladon包 | 基于策略的访问控制概念使用策略 条件 Conditions自定义conditionLadon Condition使用示例 持久化访问控制(Warden) 结合 Gin 开发一个简易 ACL 接口参考 golang常用库之-ladon包 | 基于策略的访问控制 https://github.com/ory/ladon Lado…

NPM 仓库的超集 JSR 来了!

引言 今天在 Deno 博客中看到了一篇文章,介绍了一个叫 JSR 的包管理注册中心,简单尝试了一下觉得还不错,本文将结合原文章和个人体验对 JSR 进行一个详细的介绍。 在现如今的前端开发中,包管理注册中心 (如 npmjs.com) 扮演着至…

Javaweb学习记录(一)Maven

Maven是一款Java项目管理工具,下面将介绍Maven的实际作用和相关的操作 Maven项目依赖的添加 在Maven项目中添加依赖,通过dependencies标签添加所有依赖,所有依赖都添加在里面,而单个依赖就使用dependency标签添加进项目&#xf…

Github 2024-03-17 php开源项目日报 Top9

根据Github Trendings的统计,今日(2024-03-17统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量PHP项目9Blade项目2Laravel:表达力和优雅的 Web 应用程序框架 创建周期:4631 天开发语言:PHP, BladeStar数量:75969 个Fork数量:24281 次关…

电脑充电器能充手机吗?如何给手机充电?

电脑充电器可以给手机充电吗? 电脑充电器可以给手机充电,但前提是电脑充电器的功率输出与手机的功率匹配且接口匹配。 假设电脑充电器的输出功率为5V/2A,手机也支持5V/2A的输入功率。 只要接口匹配,就可以使用电脑充电器给手机充…

kafka无法消费数据

进入zookeeper客户端,将brokers节点下的topics节点下的__consumer_offsets删除就可。 1.在启动zookeeper的前提下,打开./zkCli.sh docker exec -it zookeeper bash //只登录容器,不登录 zkCli./bin/zkCli.sh //执行脚本新建一个Cli…

移动性能测试 iOS17 性能测试脚本

已经 2024 年 3 月中旬了,ios17 版本出来也已经快半年了。 我看到业界主流开源的 ios 性能测试工具都没有还没支持 ios17。包括 tidevice,py-ios-device,solox。 又因为有大佬开源了可以和 ios17 通信的 pymobiledevice3。 所以我这里组装了下…

记录-gitlab-安装在k8s中的一些注意点

一、已有cert-manager的时候如何配置? 1、首先需要创建一个ClusterIssuer apiVersion: cert-manager.io/v1 kind: ClusterIssuer metadata:name: letsencrypt-staging spec:acme:# You must replace this email address with your own.# Lets Encrypt will use thi…

Mapper.xml映射文件

Mapper.xml映射文件&#xff1a; <select> resultType如果返回的是集合&#xff0c;那么应该设置为集合包含的类型而不是集合本身的类型 如果参数类型是pojo类型&#xff0c;参数名必须是pojo中的属性名 <insert> session.commit(); session factory.openSessio…

微信开发者工具如何使用?使用注意事项

&#xff08;1&#xff09;单位如何进行换算&#xff1f; 1 px 750/屏幕宽度 rpx 1 rpx 屏幕宽度/750 px &#xff08;2&#xff09;如何新建文件&#xff1f; 1> 点开app.json 2> 在“pages/index/index”后面接“&#xff0c;pages/自定义文件夹名/自定义文件名”…

万界星空科技商业开源MES,技术支持+项目合作

商业开源的一套超有价值的JAVA制造执行MES系统源码 亲测 带本地部署搭建教程 教你如何在本地运行运行起来。 开发环境&#xff1a;jdk11tomcatmysql8springbootmaven 可以免费使用&#xff0c;需要源码价格便宜&#xff0c;私信我获取。 一、系统概述&#xff1a; MES制造执…

LinkedList源码解析和设计思路

一、 继承体系 LinkedList类位于java.util包中&#xff0c;它实现了List接口和Deque接口&#xff0c;LinkedList可以被当做链表、双端队列使用&#xff0c;并且继承自AbstractSequentialList类。在继承关系中&#xff0c;它的父类是AbstractSequentialList&#xff0c;而Abstr…

go语言请求http接口示例 并解析json

本例请求了天气api接口 对接流程 注册一个账号, 对接免费实况天气接口阅读接口文档 http://tianqiapi.com/index/doc?versionday请求接口解析json 开发流程 创建一个 json.go 文件需要引入的包 import ("encoding/json""fmt""io/ioutil"&q…

设计模式--访问者模式(Visitor Pattern)

访问者模式&#xff08;Visitor Pattern&#xff09;是一种行为型设计模式&#xff0c;它可以让你在不改变类的情况下&#xff0c;增加作用于一组对象上的新操作。 访问者模式主要包含以下几个角色&#xff1a; Visitor&#xff08;访问者&#xff09;&#xff1a;这是一个接…

Spring炼气之路(炼气二层)

一、bean的配置 1.1 bean的基础配置 id&#xff1a; bean的id&#xff0c;使用容器可以通过id值获取对应的bean&#xff0c;在一个容器中id值唯一 class&#xff1a; bean的类型&#xff0c;即配置的bean的全路径类名 <bean id"bookDao" class "com.zhang…

软件测试 自动化测试selenium 基础篇

文章目录 1. 什么是自动化测试&#xff1f;1.1 自动化分类 2. 什么是 Selenium &#xff1f;3. 为什么使用 Selenium &#xff1f;4. Selenium 工作原理5. Selenium 环境搭建 1. 什么是自动化测试&#xff1f; 将人工要做的测试工作进行转换&#xff0c;让代码去执行测试工作 …

tailwindcss在vite esm模式下的配置修改

vite6将弃用cjs&#xff08;CommonJS &#xff09;采用ESM&#xff08;ESModule&#xff09;&#xff0c;所有的js文件将编译为ESM语法&#xff0c;参考https://cn.vitejs.dev/guide/troubleshooting 基于ESM方式&#xff0c;我们需要对导出导入方式和postcss插件加载方式进行…