npm run xxx的时候发生了什么

75 阅读1分钟

通过vue-cli,vite等工具创建的项目,执行命令时通常时 npm run xxx,执行这句命令时到底发生了什么呢

一、命令 npm run xxx

比如 我们 通过vite 创建一个项目 yarn create vite my-vue-app --template vue

项目package.json里,scripts定义了一组可以运行的node脚本

image.png

npm run dev 相当于执行 vite;npm run build 相当于执行 vite build;

二、为什么npm run xx可以执行

既然npm run dev 相当于执行 vite,那为什么不直接执行 vite这个命令呢?因为没有全局安装vite,提示command not found: vite。(可以用npx vite执行,npx时,也是到node_modules/.bin下查找命令)

为什么npm run dev就可以执行呢?

在yarn 安装node_modules包时,会在node_modules下生成.bin文件,.bin里面有vite软链接(Symbolic Link),是一个脚本,执行npm run dev时,会执行此处的脚本

image.png

由于node_modules/.bin/目录会在运行时加入系统的PATH变量,因此在运行npm时,就可以不带路径,直接通过命令来调用这些脚本

image.png

为什么node_modules下会有.bin,.bin下会有vite呢?

vite包里 package.json 里有个bin配置,用来指定各个内部命令对应的可执行文件的位置。

image.png

参考文献