What exactly does npm run dev do?

introduction

The npm run dev command should be the most commonly used command in our work, but I believe many friends have not had an in-depth understanding of how it is run. The following will explain the underlying operation of npm run dev from the shallower to the deeper.

understand

When npm run dev, it will first go to the project's package.json file to find the corresponding dev in 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 vue-cli-service servethe order?

Answer: If executed directly vue-cli-service serve, an error will be reported because vue-cli-servicethis instruction does not exist in the operating system.

The second question of the soul

Then some friends may ask again, since vue-cli-service servethis instruction does not exist in the operating system, why npm run devis it equivalent to execution when it is executed vue-cli-service serve? Why can it succeed without reporting an error that the instruction does not exist?

answer:

• When we install dependencies, we execute them through npm install. When npm installs dependencies, it will node_modules/.bin/create vue-cli-serviceseveral executable files named in the directory.
• .binThe directory is not any npm package. The files in the directory represent soft links. When you open the file, you can see the writing at the top of the file #!/bin/sh, indicating that this is a script.
• So when using npm run devexecute vue-cli-service serve, although there is no installed vue-cli-serviceglobal command, npm will ./node_modules/.binfind vue-cli-servicethe file in and execute it as a script, which is equivalent to execution ./node_modules/.bin/vue-cli-service serve.

The third question of the soul

Then some friends may ask more seriously, since .binthe files in the directory represent soft links, where do the soft link files in the bin directory come from? How does it know where this soft connection is executed?

answer:

• Those soft links in the bin directory exist in the outermost package-lock.json file of the project.
• From package-lock.json, we can see that when we npm installcreate the entire new vue project, npm declares bin/vue-cli-service.js as bin.
• So at npm installthat time, 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 them globally.
• In other words, when npm install, npm will help us configure this soft link. In fact, this soft link is equivalent to a mapping. When npm run dev is executed, the corresponding soft link will be found in node_modules/bin. Mapping file, and then find the corresponding js file to execute.

At this point, after three soul questions, I believe you already have some understanding of the underlying operation of npm run dev.

Conclusion

This article is the author's personal study notes. If there are any fallacies, please let me know. Thank you very much! If this article is helpful to you, please click follow and like~, your support is the motivation for the author to continue to update.