npm run 做了什么(详细步骤)?

1.前言

最近敲了一个后端nodejs+MongoDB+express,前端vue3+vite的项目。

然后我发现前后端启动的命令不同,这引发了我的思考

前端:

package.json中scripts部分

json 复制代码
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check "build-only {@}" --",
  },

启动命令:

shell 复制代码
npm run dev

后端

package.json中scripts部分

json 复制代码
  "scripts": {
    "start": "nodemon ./bin/www"
  },

启动命令

shell 复制代码
 npm start

虽然前后端项目的命令都是写在package.json的scripts中,但是一个需要加run,一个不需要加run这是为什么呢?

2.npm run做了什么?

要弄清楚为什么一个执行脚本命令npm需要加上run,一个执行脚本命令npm可以不加,我们首先先弄清楚npm run 做了什么

npm文档: npm-run-script 详解

2.1终端输入命令

首先我们在终端输入比如npm run <command> [-- <args>]的命令

arduino 复制代码
npm run dev 

2.2 到package.json的scripts中寻找命令

在终端输入了如下面命令后

arduino 复制代码
npm run <command>

npm得到command命令,然后到package.json的"scripts"中寻找相同的命令,然后运行命令,

如果没有找到则会提示没有该命令,并告诉我们输入npm run可以列出所有scripts列表

输入npm run可以显示所有可用scripts:

2.3执行命令

例如我执行了启动命令:

arduino 复制代码
npm run dev

package.json中scripts部分如下:

json 复制代码
  "scripts": {
    "dev": "vite"
  }

npm在找到dev命令之后,需要执行vite命令,

  • npm首先会到当前项目的node_modules.bin目录下找vite命令
  • 找不到就到系统环境变量中找vite

找到后执行vite命令启动项目

3.为什么有的npm scripts命令不用run

npm文档: npm-run-script 详解

查看npm 文档可知test、start、restart 和 stop四个scripts命令是可以直接调用的命令,(使用run也可以),原因是他们是生命周期(测试,启动,重启)和直接运行的脚本.

原文如下

run[-script] is used by the test, start, restart, and stop commands, but can be called directly, as well. When the scripts in the package are printed out, they're separated into lifecycle (test, start, restart) and directly-run scripts.

也就是说其实npm startnpm run start效果是一样的,如下都能启动node项目:

当然test、restart 和 stop也是这样,

当然前提是先要在package.json中scripts部分中定义command.例子如下

json 复制代码
  "scripts": {
    "start": "nodemon ./bin/www",
    "test": "echo "Error: no test specified" && exit 1",
    "restart": "pm2 restart server",
    "stop": "pm2 stop server"
  },

4.总结

npm run 执行步骤如下:

1.终端输入命令npm run <command>

2.npm 到package.json"scripts"中寻找有无对应的命令,找到对应命令继续下一步,未找到提示未找到

3.找到对应命令后,执行具体命令,先到当前项目目录下node_modules.bin找对应命令,找不到到系统环境变量去找

4.如果都没有找到该命令,提示该命令不是内部或外部命令,也不是可运行的程序或批处理文件。

四个脚本命令使用npm run <command>npm <command>直接执行相同

分别是test,start,restart,stop

不同的系统运行命令执行的shell不同,因此往往在bin下面同一个命令有三个shell

以vite为例,分别为

  • vite 在 Unix/Linux 系统执行 (mac/linux)
  • vite.cmd 在Windows命令提示符中运行(cmd)
  • vite.ps1 在 PowerShell 中运行
相关推荐
狂奔solar8 分钟前
分享个好玩的,在k8s上部署web版macos
前端·macos·kubernetes
qiyi.sky10 分钟前
JavaWeb——Web入门(8/9)- Tomcat:基本使用(下载与安装、目录结构介绍、启动与关闭、可能出现的问题及解决方案、总结)
java·前端·笔记·学习·tomcat
夜色呦28 分钟前
现代电商解决方案:Spring Boot框架实践
数据库·spring boot·后端
清云随笔31 分钟前
axios 实现 无感刷新方案
前端
鑫宝Code33 分钟前
【React】状态管理之Redux
前端·react.js·前端框架
爱敲代码的小冰36 分钟前
spring boot 请求
java·spring boot·后端
忠实米线41 分钟前
使用pdf-lib.js实现pdf添加自定义水印功能
前端·javascript·pdf
pink大呲花43 分钟前
关于番外篇-CSS3新增特性
前端·css·css3
少年维持着烦恼.1 小时前
第八章习题
前端·css·html
我是哈哈hh1 小时前
HTML5和CSS3的进阶_HTML5和CSS3的新增特性
开发语言·前端·css·html·css3·html5·web