npm script
npm run xxxWhat exactly happens when we run it in the console ?
Friends who have used vue-clior must know that when we run a project, we often need to enter in the consolecreate-react-appnpm run xxx
Only then will our project start to build, and then we will discuss the process
We open a project, take create-react-appscaffolding as an example
It package.json's roughly like this
There are some basic information about this project, and the scriptattributes are what we want to discuss
When we execute npm run xxxit will actually execute scriptthe instruction in the
Executing npm run start, for example, will actually executereact-script start
So here comes the question:
Why do we npm run startdo it indirectly by doing it react-script start, but not directly?
The answer is : react-script startthis instruction does not exist in the operating system, so we will report an error if we execute it directly
Then the question arises again:
Why does execution npm run startmake react-script startnormal execution? What did npm do for us in this process?
In fact, when we execute npm run start, the system will automatically find mode_modules/.bin/the corresponding file in the directory, that is,react-script
This file is an executable file used to start the entire project
But when we click on the file, the inside of the file looks like this
Obviously, this file is just a mapping, its function is actually our real startup file
When we use npm installto download npm package, we will download various files of this package
There will be a bin statement in the package.json inside the npm package, which points to ./binthe corresponding file in the directory, here isreact-script.js
And during the creation process, npm will soft link this file (react-script.js) into ./node_modules/.binthe directory to form a mapping relationship ,
And npm will also automatically add `node_modules/.bin to $PATH, so that you can run dependent programs and develop dependent programs directly as commands
So when we execute ./node_modules/.binthe corresponding file, npm will look for the real js file (react-script.js) to execute
This completes the process
in conclusion:
npm i, npm will help us configure this kind of soft connection. In fact, this kind of soft connection is equivalent to a mapping. npm run xxx When executing, it will find the corresponding mapping file node_modules/binin , and then find the corresponding js file to execute . **
In fact, there is one more thing that I didn’t say, that is ./node_modules/.bin, why would there be three files with the same name?
In fact, these three files represent three different execution environments
If we run it in cmd, windows usually calls react-script.cmdthis file
# unix 系默认的可执行文件，必须输入完整文件名
react-script
# windows cmd 中默认的可执行文件，当我们不添加后缀名时，自动根据 pathext 查找文件
react-script.cmd
# Windows PowerShell 中可执行文件，可以跨平台
react-script.ps1
To make a summary :
When we run react-script servethis command, it is equivalent to running node_modules/.bin/react-script.cmd serve.
Then this script will use node to run react-script.jsthis js file
Because a series of system-related APIs can be used in node, many things can be done in this js, such as reading and analyzing files in the directory where this command is run, generating files according to templates, etc.