package.json中的npm run命令执行后发生了什么

👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

---

前言

当我们已然是一位大师，拉下来项目后， 行云流水的打下了 npm install，再去项目的package.json文件里找scripts 里找对应的启动命名xxx，npm run xxx，一套组合拳下来，项目启动成功

---

一、package.json文件

{
  "name": "vue",
  "version": "2.0.10",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

二、运行步骤

例如启动vue项目 npm run serve的时候，实际上就是执行了 vue-cli-service serve 这条命令

1. 运行命令

代码如下（示例）：

npm run serve

2. 执行命令

(1) 为什么 不直接执行vue-cli-service serve 而要执行 npm run serve 呢？

答：因为直接执行vue-cli-service serve会报错，系统中不存在 vue-cli-service 这条全局指令

---

(2) 为什么通过 npm run serve 执行 vue-cli-service serve 就可以成功呢？

答：在通过npm install 安装依赖的时候，是会在node_modules/.bin/ 目录中创建好vue-cli-service 为名的几个可执行文件

这些目录表示一个个软链接，打开文件可以看到顶部写着 #!/bin/sh ，对于#! 不了解的可以看一下我往期的文章 （JS文件头部 #!/usr/bin/env node 到底执行什么了）

当 npm run serve 执行 vue-cli-service serve 命令时，虽然没有关于 vue-cli-service 的全局命令，但是 npm 会到 ./node_modules/.bin 中找到 vue-cli-service 文件作为脚本来执行

则相当于执行了 ./node_modules/.bin/vue-cli-service serve（最后的 serve 作为参数传入）

---

(3) bin目录下为什么会有3个同名文件？

在.bin目录下，一般针对一个依赖模块，会有3个可执行文件, 三者都是用node执行一个js文件

• 没有后缀名的是对应Unix系的shell脚本
• .cmd为后缀名的是windows bat脚本
• .ps1为后缀名的则是PowerShell中可执行文件（可以跨平台）

---

（4）bin目录下的软连接文件是哪里来的呢？它又是怎么知道这条软连接是执行哪里的呢？

答：我们以 vue-cli-service 为例，在新建的vue项目里进行搜索。可以看到在 npm install的时候，就将bin/vue-cli-service.js 作为bin声明（bin是命令名到本地文件名的映射 — 官方解释）

• 运行 npm run xxx的时候，npm 会先在当前目录的 node_modules/.bin 查找要执行的程序，如果找到对应的映射文件，然后会在找到相应的js文件来执行；
• 没有找到则从全局的 node_modules/.bin 中查找，npm i -g xxx就是安装到到全局目录；
• 如果全局目录还是没找到，那么就从 path 环境变量中查找有没有其他同名的可执行程序
  

总结

例如：以上就是今天要讲的内容，本文介绍了 npm run 命令运行后的调用顺序