introduction
The npm run dev command should be the most commonly used command in our work, but I believe many friends have not had a deep understanding of how it works. The following is an explanation of the underlying operation of npm run dev from the shallower to the deeper.
understand
When npm run dev, first go to the package.json file of the project to find the corresponding dev in the scripts, and then execute the dev command.
For example, when starting the vue project npm run serve, the command vue-cli-service serve is actually executed.
package.json file
{
"name": "h5",
"version": "1.0.7",
"private": true,
"scripts": {
"dev": "vue-cli-service serve"
},
} The first question of the soul
Then some friends may ask, why not directly execute the vue-cli-service serve command?
Answer: Because the vue-cli-service serve is executed directly, an error will be reported, because the command vue-cli-service does not exist in the operating system
The second question of the soul
is that some friends may ask again, since the command vue-cli-service serve does not exist in the operating system, why when executing npm run dev, it is equivalent to executing vue-cli-service serve , why does it succeed in this way, and does not report an error that the command does not exist?
answer:
When we install dependencies, we execute them through npm install. When npm installs dependencies, it will create several executable files named vue-cli-service in the node_modules/.bin/ directory.
The .bin directory is not any npm package. The files in the directory represent soft links one by one. When you open the file, you can see #!/bin/sh written on the top of the file, indicating that this is a script.
So when using npm run dev to execute vue-cli-service serve, although there is no global command to install vue-cli-service, npm will find the vue-cli-service file in ./node_modules/.bin as a script to execute, It is equivalent to executing ./node_modules/.bin/vue-cli-service serve.
The third question of the soul
Then some friends may ask more seriously. Since the files in the .bin directory represent soft links, where do the soft link files in the bin directory come from? How does it know where this soft link is executed?
answer:
Those soft links in the bin directory exist in the package-lock.json file at the outermost layer of the project.
It can be seen from package-lock.json that when we npm install the entire new vue project, npm declares bin/vue-cli-service.js as bin.
So when npm install, after npm reads the configuration, it soft-links the file to the ./node_modules/.bin directory, and npm will automatically add node_modules/.bin to $PATH, so that it can be run directly as a command Dependent programs and development dependent programs do not need to be installed globally.
That is to say, when npm install, npm will help us configure this kind of soft connection. In fact, this kind of soft connection is equivalent to a mapping. When npm run dev is executed, it will find the corresponding one in node_modules/bin Mapping files, and then find the corresponding js file to execute.
So far, after three soul questions, I believe you have some understanding of the underlying operation of npm run dev.
———————————————
Original link: https://blog.csdn.net/web2022050901/article/details/125165316