2022-09-28业务场景00
请注意,本文编写于 570 天前,最后修改于 570 天前,其中某些信息可能已经过时。

package.json

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

{
  "name": "whyknown",
  "version": "1.0.0",
  "description": "whyknown,前端开发者必备网站",
  "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": "whyknown",
  "contributors": [
    {
      "name": "whyknown",
      "email": "example@example.com",
      "url": "https://www.whyknown.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. 如果全局目录还是没找到相关命令,那么就从系统的环境变量中查找同名的可执行程序。

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!