npm run xxx 的执行流程首先npm是Node.js的软件包管理器，其本身实际上不能运行任何包，如果你想去执行某

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

我的博客网站，学习react后写的，开源了管理系统及后台WebApi，欢迎查看交流 👉 www.weison-zhong.cn

首先npm是Node.js的软件包管理器，其本身实际上不能运行任何包，如果你想去执行某个包，须先在package.json文件中去定义脚本(全局安装及使用npx除外)，脚本中指明用node执行具体操作。
概览流程图

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

不是因为npm run serve命令更好记更短,而是直接在控制台运行vue-cli-service serve会报错，操作系统中没有vue-cli-service这个指令;
而执行npm run xxx就可以，因为我们通过npm i xxx安装Node包，会自动在node_modules下的.bin里创建一个软连接。
- 本地安装链接会放到./node_modules/.bin目录
- 全局安装会连接到全局的文件，linux/macos在/usr/local/bin里，windows则在/AppData/npm
例如运行npm run serve 时npm 会到 ./node_modules/.bin 中找到 vue-cli-service 文件作为脚本来执行，在Windows系统下，则相当于执行了 node_modules/.bin/vue-cli-service.cmd serve（最后的serve作为参数传入），这个脚本会使用 node 去运行 vue-cli-service.js这个 js 文件；

npx会检查脚本 xxx 是否出现在本地项目或全局安装目录中，若存在则去执行对应xxx脚本
- 例如上面的例子，执行 npx vue-cli-service serve 时会去./node_modules/.bin寻找vue-cli-service并执行，这样就可以不用在package.json中写好script脚本直接调用了。
若没有找到则会临时安装一个模块，使用过后会自动删除
- 例如执行npx create-react-app react18,将会下载最新的create-react-app到一个临时目录，并在使用完毕后删除该临时目录。

npm run xxx 的执行流程