项目中执行 npm run xxx 的时候发生了什么？

今天去面试前端的时候，面试官问到构建工具方面的知识点，其中一个问题就是 npm run xxx 的执行过程是怎样的。搜索了相关资料，整理了一下。本文将介绍，当使用 npm run 命令的时候，内部是如何执行的

package.json​

npm 离不开 package.json ，要了解 npm 的运行机制，我们先看看 package.json 文件是做什么的。首先 package.json 文件是每个前端项目存在于根目录的文件，包含了项目的一些基本信息（例如项目名称，版本号，描述，一些脚本，依赖等等），大致的结构如下

{
  "name": "1024nav",
  "version": "1.0.0",
  "description": "1024nav，前端开发者必备网站",
  "main": "src/index.js",
  "scripts": {
    "start": "node index.js",
    "lint": "eslint **/*.js"
  },
  "dependencies": {
    "express": "^4.16.4",
    "compression": "~1.7.4"
  },
  "devDependencies": {
    "eslint": "^5.16.0",
    "nodemon": "^1.18.11"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/xxx.git"
  },
  "author": "1024",
  "contributors": [
    {
      "name": "Kelen",
      "email": "example@example.com",
      "url": "https://www.1024nav.com"
    }
  ],
  "keywords": ["server", "osiolabs", "express", "compression"]
}

我们这里重点关注 script 的配置，该配置罗列了一些可以运行的脚本，当我们在根目录执行 npm run 或者 yarn run 的时候，就会去调用这里的命令。我们拿上面的 start 命令来讲解。

当我们执行 npm run start 的时候，就会去 package.json 文件的 script 查找相关的命令，匹配到的是 start: node index.js 这个命令。

"scripts": {
  "start": "node index.js",
  "dev": "nodemon",
  "lint": "eslint **/*.js"
}

这时候就会执行 node index.js 这个命令。（由于系统已经安装过 node，所以这个命令就可以正常执行）。那么 npm run start 跟 node index.js 有什么区别呢？为什么不直接 node index.js呢？

npm 脚本的唯一要求就是可以在 Shell 执行

全局命令和局部命令​

由于 node 我们已经安装在电脑里面了，所以上面两个命令其实没啥区别，你非要用 node index.js 也是可以的。但是有时候有一些命令没有全局安装的时候，例如第二条命令的 eslint **/*.js 。你直接执行就会报错

$ eslint **/*.js
bash: eslint: command not found

主要的原因是我们没有全局安装 eslint ，所以会报错，那为什么 npm run lint 就可以顺利执行呢。为了解答这个问题，我们来看看 node_modules 文件夹的.bin 目录

.bin 目录​

.bin 目录，这个目录下的文件，都是一些软链接，打开文件可以看到文件顶部写着 #!/bin/sh ，表示这是一个脚本。所以 npm run 执行的时候，当全局没有安装相关命令的时候，就会到这里去查找。

由此我们可以知道，当使用 npm run test 执行 eslint **/*.js 时，虽然没有全局安装 eslint 的全局命令，但是 npm 会到 ./node_modules/.bin 中找到 eslint 文件作为脚本来执行，则相当于执行了 ./node_modules/.bin/eslint **/*.js

总结​

1. 运行 npm run xxx 的时候，npm 会先在当前目录的 node_modules/.bin 查找要执行的程序，如果找到则运行；
2. 没有找到则从全局的 node_modules/.bin 中查找，也就是npm i -g xxx 就是安装到到全局目录；
3. 如果全局目录还是没找到相关命令，那么就从系统的环境变量中查找同名的可执行程序。