运行npm run xxx 发生了什么

最新推荐文章于 2024-05-13 21:03:27 发布

syl~

最新推荐文章于 2024-05-13 21:03:27 发布

阅读量213

点赞数

文章标签： npm 前端 javascript

本文链接：https://blog.csdn.net/syl19980202/article/details/125737068

版权

运行npm run xxx 发生了什么?
npm run xxx的时候首先会去项目的package.json文件里找到scripts中对应的xxx，来运行相应的命令；例如vue项目中的npm run serve, 实际上是找到package.json文件中scripts里面的serve，执行vue-cli-service serve命令；
为何不直接执行vue-cli-service serve命令?
直接执行vue-cli-service serve命令会报错，操作系统中没有vue-cli-service这一条命令;
执行npm run serve的时候，也就是相当于执行了vue-cli-service serve ，为什么这样它就能成功，而且不报指令不存在的错误呢？
- 我们在安装依赖的时候，是通过npm i xxx来执行的，例如: npm i vue-cli-service, npm 在安装这个依赖的时候就已经在node_modules/.bin/中创建好了以vue-cli-service为名的几个可执行文件了;
- .bin目录并不是一个npm包，目录下的文件表示是一个个的软连接，打开文件，顶部显示: #!/bin/sh表示这是一个脚本; 所以我们在执行npm run serve(等同于: npm run vue-cli-service serve)时，虽然没有安装全局命令，但npm会到node_modules/.bin目录中找到vue-cli-service文件作为脚本来执行，则相当于执行了 ./node_modules/.bin/vue-cli-service serve（最后的 serve 作为参数传入），因此是不会报错的；
bin目录下的那些软连接文件是哪里来的呢？它又是怎么知道这条软连接是执行哪里的呢？

vue-cli-service存在于项目最外层的package-lock.json中。当我们npm整个项目的时候，npm将整个bin/vue-cli-service.js作为bin声明了；所以在npm install时，npm读到该配置时就将该文件软连接到.node_modules/.bin/目录下了, 而npm还会自动将node_modules/.bin加上$PATH, 这样就可以直接做为命令依赖程序和开发依赖程序，不用全局配置了;
5. 在node_modules/bin中有三个vue-cli-service文件。为什么会有三个文件呢？
在.bin目录下，一般针对一个依赖模块会有三个可执行文件，三者的作用都是用node执行一个js文件；
在cmd中运行的时候，windows一般调用的是vue-cli-service.cmd文件，所以当我们运行vue-cli-service serve命令时就相当于是运行了node_modules/.bin/vue-cli-service.cmd serve, 然后这个脚本会使用node去运行vue-cli-service.js这个文件；
由于node可以使用一系列系统相关的API，所以在这个js中可以做很多事情，eg: 读取并分析运行这条命令下的目录的文件、根据模板生成文件等。

# unix 系默认的可执行文件，必须输入完整文件名
vue-cli-service

# windows cmd 中默认的可执行文件，当我们不添加后缀名时，自动根据 pathext 查找文件
vue-cli-service.cmd

# Windows PowerShell 中可执行文件，可以跨平台
vue-cli-service.ps1