npm run dev 做了什么❓小白也能看懂

大家在做前端项目时，肯定经常用npm run dev这个命令来启动本地开发服务器吧？但你有没有想过，当我们输入这行命令后，背后到底发生了什么呢？

从package.json说起

在我们项目的package.json文件里，通常会有这样的配置：

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

看起来npm run dev就是执行了vite这个命令。但如果你直接在命令行里输入vite，通常会提示"命令未找到"。这是为什么呢？

秘密藏在node_modules里

答案就在项目根目录的node_modules文件夹中。当我们安装依赖包时，npm会在这里创建很多文件夹，其中就包括vite包。

在vite包的package.json文件中，有一个重要的配置项bin：

{
  "bin": {
    "vite": "bin/vite.js"
  }
}

这告诉npm："当你看到有人想运行vite命令时，就去执行bin/vite.js这个文件"。

跨平台的秘密

有趣的是，在vite包的bin目录下，我们实际上会看到三个文件：

• vite（没有后缀，适用于Unix/Linux系统）
• vite.cmd（适用于Windows系统）
• vite.ps1（适用于PowerShell）

这是因为不同操作系统使用不同的脚本语言。npm很聪明，它会根据你当前的操作系统，自动选择正确的文件来执行。

对于Unix/Linux系统，它会使用一个shell脚本；对于Windows，它会使用.cmd文件；对于PowerShell用户，它会使用.ps1文件。

执行流程全解析

所以，整个npm run dev的执行过程是这样的：

1. 你在终端输入npm run dev
2. npm去查看package.json中的scripts配置，发现dev对应的是"vite"
3. npm去node_modules/.bin目录下寻找vite命令
4. 根据你的操作系统，选择正确的脚本文件执行
5. 这个脚本文件最终会调用node.js来运行vite的JavaScript代码
6. 你的开发服务器就启动起来了！

如果本地没有怎么办？

如果项目本地没有安装vite，npm会去全局安装的包中寻找。如果你也没有全局安装，那么就会看到我们熟悉的"command not found"错误提示。

总结

简单来说，npm run dev实际上是通过npm执行了一个"快捷方式"，这个快捷指向了我们安装在node_modules中的vite包里的一个脚本文件。

npm帮我们处理了不同操作系统的差异，让我们可以用同样的命令在各个平台上工作。