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
再做个总结:
当我们运行react-script serve这条命令的时候，就相当于运行 node_modules/.bin/react-script.cmd serve。
然后这个脚本会使用 node 去运行 react-script.js这个 js 文件
由于 node 中可以使用一系列系统相关的 api ，所以在这个 js 中可以做很多事情，例如读取并分析运行这条命令的目录下的文件，根据模板生成文件等。