当我们在控制台运行`npm run xxx`时,到底发生了什么?

npm script

当我们在控制台运行npm run xxx时,到底发生了什么?

使用过vue-cli或者create-react-app的小伙伴一定知道,当我们运行项目时,往往需要在控制台输入npm run xxx

只有这样 我们的项目才会开始构建,接下来我们就来探讨其中的过程

我们打开一个项目,以create-react-app脚手架为例

它的package.json大体是这样的

其中有本项目的一些基本信息,其中script属性就是我们要探讨的东西

当我们执行npm run xxx时 实际上会执行script中的指令

例如执行npm run start,实际上会执行react-script start

那么问题来了:

我们为什么要通过执行npm run start来间接执行react-script start,而不能直接执行它呢？

答案是:react-script start这条指令并不存在于操作系统中,所以我们直接执行是会报错的

那么问题又来了:

为什么执行npm run start就会使得react-script start正常执行呢? 在这个过程中 npm帮我们做了一些什么事呢?

其实,当我们执行npm run start时,系统会自动寻找在mode_modules/.bin/目录中的对应文件,也就是react-script

这个文件就是一个可执行文件,用于启动整个项目

但是我们点开文件,文件内部是这样的

很显然,这个文件只是一个映射,他的功能实质性我们真正的启动文件

当我们使用npm install来下载npm包时,会下载这个包的各种文件

这个npm包内部的package.json中会有一个bin声明,他指向./bin目录中的对应文件,在这里就是react-script.js

并且在创建的过程中,npm会将这个文件(react-script.js)软链接到 ./node_modules/.bin目录中,形成一个映射关系,

而 npm 还会自动把`node_modules/.bin加入$PATH，这样就可以直接作为命令运行依赖程序和开发依赖程序

所以我们执行./node_modules/.bin对应文件时,npm就会去寻找真正的js文件(react-script.js)来执行

这样就完成了一整个流程

总结一下：

npm i 的时候，npm 就帮我们把这种软连接配置好了，其实这种软连接相当于一种映射，执行npm run xxx 的时候，就会到 node_modules/bin中找对应的映射文件，然后再找到相应的js文件来执行。**

---

其实还有一点没说 就是./node_modules/.bin中,会什么会有三个同名文件呢？

其实这三个文件代表不同的三个执行环境

如果我们在 cmd 里运行的时候，windows 一般是调用了 react-script.cmd，这个文件

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

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

# Windows PowerShell 中可执行文件，可以跨平台
react-script.ps1
1
2
3
4
5
6
7
8

再做个总结:

当我们运行react-script serve这条命令的时候，就相当于运行 node_modules/.bin/react-script.cmd serve。

然后这个脚本会使用 node 去运行 react-script.js这个 js 文件

由于 node 中可以使用一系列系统相关的 api ，所以在这个 js 中可以做很多事情，例如读取并分析运行这条命令的目录下的文件，根据模板生成文件等。