一：概述

在我们进行项目开发时，通过脚手架安装好包后，执行npm run xxx，项目就成功跑起来了，那么，为什么执行这个命令就可以让项目正确执行起来呢？

{
  "name": "h5",
  "version": "1.0.7",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve"
   },
}

二：方式

（一）：定义：

package.json文件中的 "scripts"字段允许我们定义一组自定义的命令，这里的xxx就是我们自己自定义的命令，

一方面是简化写法，好记忆，实际本质对应的就是vue-cli-service serve，执行的是vue-cli-service serve，

说白了就是执行了./node_modules/.bin/vue-cli-service serve

（二）：查找规则

1：查找命令=>首先去查找当前node_modules/.bin 目录下查找是否存在 vue-cli-service 可执行文件

2：查找全局安装=>如果在项目中没有找到，那么就会继续在全局中查找node_modules/.bin 目录下查找< script>对应的可执行文件

3：执行命令=> 找到后，npm将执行该命令

三：注入机制

1：在执行npm run xxx时，实际上会将node_modules/.bin 目录添加到系统的 PATH 中，

2：其中包含了大部分通过npm install可执行文件，这样就可以全局范围找到，不用命令行指定完整路径

3：如果全局安装，那么可执行文件也会被放置在全局 node_modules/.bin 目录中，这就使得在任何地方都能被调用到

四：拓展

（一）为什么node_modules/bin中 有三个vue-cli-service文件？

1：在cmd中运行可执行文件时，一般会调用vue-cli-service.cmd

2：我们运行vue-cli-service serve这条命令的时候，就相当于运行 node_modules/.bin/vue-cli-service.cmd serve

3：然后这个脚本会使用 node 去运行 vue-cli-service.js这个 js 文件

4：由于 node 中可以使用一系列系统相关的 api ，所以在这个 js 中可以做很多事情

@ECHO off
GOTO start
:find_dp0
SET dp0=%~dp0
EXIT /b
:start
SETLOCAL
CALL :find_dp0

IF EXIST "%dp0%\node.exe" (
  SET "_prog=%dp0%\node.exe"
) ELSE (
  SET "_prog=node"
  SET PATHEXT=%PATHEXT:;.JS;=;%
)

endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\@vue\cli-service\bin\vue-cli-service.js" %*

（二）为什么直接运行vue-cli-service serve 会报错？

1：vue-cli-service 不是一个全局可执行命令，而是作为项目依赖安装在项目的 node_modules中，运行时操作系统不知道去哪里找这个命令，而通过npm run xxx 时，自定义命令指向了他所以可以正确执行

（三）vue-cli-service serve来自哪里

1：vue-cli-service 命令是 Vue CLI提供的可执行文件，在项目初始化会自动创建一个 .bin目录，包含了一些项目本地的可执行文件

2：通过Vue CLI创建一个新的Vue.js项目时，在项目的 node_modules/.bin 目录下创建一个名为 vue-cli-service（或者是vue-cli-service.cmd，这取决于你使用的是Windows还是其他系统）的可执行文件。

3：在package.json文件的"scripts"字段中使用vue-cli-service命令时，实际上是在调用这个项目本地的可执行文件，而不是全局安装的 Vue CLI，每个项目都有自己的可执行文件，避免相互影响

五：总结

1：运行 npm run xxx 的时候，npm 会先在当前目录的 node_modules/.bin 查找要执行的程序，如果找到则运行

2：没有找到则从全局的 node_modules/.bin 中查找，npm i -g xxx 就是安装到到全局目录

3：如果全局目录还是没找到，那么就从 path 环境变量中查找有没有其他同名的可执行程序

4：npm i 的时候，npm 就帮我们把这种软连接配置好了，其实这种软连接相当于一种映射，执行npm run xxx 的时候，就会到 node_modules/bin中找对应的映射文件，然后再找到相应的js文件来执行