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 中可以做很多事情,例如读取并分析运行这条命令的目录下的文件,根据模板生成文件等。