前端基础知识---NPM

npm install 到npm run xxx深度解读

详见：https://juejin.cn/post/708973...

1.运行npm install后发生了什么？

npm 模块安装机制：

1. 发出npm install命令

2. 查询node_modules目录之中是否已经存在指定模块：

   • 若存在，不再重新安装

   • 若不存在

     • npm 向 registry 查询模块压缩包的网址
     • 下载压缩包，存放在根目录下的.npm目录里
     • 解压压缩包到当前项目的node_modules目录

2.运行 npm run xxx 后发生了什么？

大家都知道目前的 node 是捆绑 npm 的。npm 是 node 的依赖管理器，虽然它不是唯一的选择，我们还有 pnpm/yarn/cnpm/ni 。但是，对于 npm 依赖声明文件 package.json本身是基本没有变化的。

例如我们可以使用 npm run serve运行某个命令, 也可以使用yarn serve运行某个命令。

可以看到在这个地方 yarn 可以省略 run 这个参数。

但是，他们都只是对 package.json 进行解析而已，例如下面的文件，当运行 npm run serve 时，其实就是运行该 json 文件中的 scripts 下的 serve 键对应的命令。

{
  "name": "h5",
  "version": "1.0.7",
  "private": true,
  "scripts": {
  "serve": "vue-cli-service serve"
    },
  "dependencies": {
  "axios": "^0.19.2",
  "vuex": "^3.4.0"
    },
  "devDependencies": {
  "node-sass": "^4.12.0"
  }
}

对于可执行这个定义，每个系统不一样。在 windows 系统上，可执行文件是通过组策略和环境变量决定的。使用 set pathext 可以查看 pathext 这个环境变量，他定义了可以作为可执行文件的后缀。

# 查看可执行文件后缀
set pathext

当我们运行 vue-cli-service serve 这条命令的时候，就相当于运行 node_modules/.bin/vue-cli-service.cmd serve 然后这个脚本会使用 node 去运行 vue-cli-service.js 这个 js 文件，由于 node 中可以使用一系列系统相关的 api ，所以在这个 js 中可以做很多事情，例如读取并分析运行这条命令的目录下的文件，根据模板生成文件等。

# unix 系默认的可执行文件，必须输入完整文件名
vue-cli-service

# windows cmd 中默认的可执行文件，当我们不添加后缀名时，自动根据 pathext 查找文件
vue-cli-service.cmd

# Windows PowerShell 中可执行文件，可以跨平台
vue-cli-service.ps1

总结：

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