Article Directory
1. Go to package.json to find the commands corresponding to scripts
For example, 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.
That is to say, when starting the vue project npm run dev, the command vue-cli-service serve is actually executed.
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
},
Question 1: Why not execute the vue-cli-service serve command directly?
因为操作系统中没有vue-cli-service 这条命令。
2. Go to node_modules to find vue-cli-service
Question 2: Since the command vue-cli-service serve does not exist in the operating system, why does it succeed without reporting an error when executing npm run dev, that is, executing vue-cli-service serve?
(1) First of all, as everyone knows, we install dependencies through npm i. For example, npm i @vue/cli-service, when npm installs this dependency, it will create several executable files named vue-cli-service in the node_modules/.bin/ directory.
(2). 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.
3. Obtain the soft link of .bin from package-lock.json
Question 3: The files in the .bin directory represent soft links, so where do those soft link files in the bin directory come from? How does it know where this soft link is executed?
1. The 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 during npm install, after npm reads the configuration, it soft-links the file to the ./node_modules/.bin directory.
2. The role of the vue-cli-service file
node_modelues --> .bin --> vue-cli-service will also automatically add node_modules/.bin to $PATH in npm, so that you can run and develop dependent programs directly as commands without installing them globally.
3. The role of npm install
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 mapping file in node_modules/bin, and then Then find the corresponding js file to execute.
Summarize
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 the dependent program can be run directly as a command And develop dependent programs, no need to install globally.
Then when running npm run dev, dev will go to package.json to find the command corresponding to scripts, this command will execute the soft link mapped by npm i in node_modules --> bin, and then find the corresponding js file to execute. That is to say, when npm i, npm will help us configure this soft connection