npm run dev之后发生了什么事

学前端的都知道，我们平时执行脚本命令的时候都会在package.json文件中配置一个scripts命令，比如下面的：

{
  "scripts": {
    "dev": "vite"
  },
}

当我们运行 npm run dev 的时候，就会执行vite的这个命令，那么这个命令是如何执行的？我们去vite的源码文件中去一探究竟。

打开vite的源码。找到packages/vite/package.json这个文件，在这个文件中，有个bin： 在bin下面，vite命令指向了bin/vite.js，也就是说，当会去执行这个文件里面的js。那我们继续打开这个文件看看它里面是做了什么事情。 首先印入眼帘的第一行代码：

#!/usr/bin/env node

这句话是什么意思呢？

#! 在Linux或者Unix它叫shebang ，中文版发音（谁罢），起到标识的作用，说明这个文件可以当做脚本来运行。

/usr/bin/env 代表了绝对地址

node 代表了需要使用的执行器类型

总结一下，就是vite.js这个文件被当成了脚本文件来执行，执行器指定为node，如果你电脑的本地环境变量中有node，就会去按照node的语法解析去执行这个文件。

我们接着继续往下看。在文件执行的时候会调用一个start函数：

function start() {
  return import('../dist/node/cli.js')
}

这个start函数会加载dist/node/cli.js文件，继续深入看里面的cli.js文件中。 上图中的很多cli就是我们在项目中配置的scritps脚本命令。这个cli方法是从cac这个npm包来。cac是一个用于构建 CLI 应用程序的 JavaScript 库。 在dev环境下，执行了vite就相当于执行了下面的命令，我们可以看到vite和vite dev其实一样的效果，都会执行这里的逻辑，然后创建一个本地服务器环境，来启动项目。 以上就是当我们执行了npm run dev以后，scripts脚本执行的整个流程了。