跳到主内容

前端项目敲入 npm run xxx 的时候发生了什么?

· 5分钟阅读

今天去面试前端的时候,面试官问到构建工具方面的知识点,其中一个问题就是 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 startnode 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. 如果全局目录还是没找到相关命令,那么就从系统的环境变量中查找同名的可执行程序。