npm run dev之后发生了什么事

1,028 阅读2分钟

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

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

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

打开vite的源码。找到packages/vite/package.json这个文件,在这个文件中,有个bin: image.png 在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文件中。 image.png 上图中的很多cli就是我们在项目中配置的scritps脚本命令。这个cli方法是从cac这个npm包来。cac是一个用于构建 CLI 应用程序的 JavaScript 库。 image.png 在dev环境下,执行了vite就相当于执行了下面的命令,我们可以看到vite和vite dev其实一样的效果,都会执行这里的逻辑,然后创建一个本地服务器环境,来启动项目。 image.png 以上就是当我们执行了npm run dev以后,scripts脚本执行的整个流程了。