什么是 npm 和 npx

npm 和 npm 都是 node 的包管理器，都用于安装管理 node.js 的包。

  • npm 是比较早的包管理器，在我们下载安装 node 的时候会跟着一器安装 npm，它内置在 node 中
  • npx 是比较新的包管理器，现在是与较新版本的 npm 一起绑定在一起

npm run dev 时的工作流程

我们在写项目的时候常常需要执行命令，用于启动服务，例如:

1
$ npm run dev

那当执行这个指令的时候，是如何启动一个服务的呢?

读取 package.json 文件

当执行此命令时，首先会到 package.json 中的 script 中查询相对应的脚本

1
2
3
4
"scripts": {
    "build": "vite build --mode production",
    "dev": "vite serve --mode development",
  }

当我们执行 npm run dev 的时候，会去到 script 中定义好的执行文件中去执行此命令，一般都会在 node_modules 中去找。

那就有一个问题这个 npm run dev 已经能够完成启动服务了，那我们用不上 npx 吧？

npx 的使用场景

在上面我们看到 npm 好像能够启动，那什么又需要 npx 呢？这是因为 npx 能够不需要安装全局或本地的包就能运行包。

原理

当我们没有安装软件包的时候，npx 不会让我们去安装该包，而是会创建一个临时缓存来保存。当执行结束的时候 npx 会删除缓存文件。

其他好处

能够直接执行 npm 中的可执行文件，假设我们在项目中加入了测试工具，如果要调用此工具的脚本，我们需要在 script 中定义这个工具的可执行文件的脚本这样非常麻烦。

1
2
3
"scripts": {
    "test": "node-modules/.bin/mocha --version",
  }

首先先定义，接着才能用npm进行使用该指令。这样非常繁琐，如果使用npx呢?

1
npx @vue/cli my-app

是不是就简便很多呢?

总结

  • npx会自动安装模块，不需要npm i 一下才能执行包。
  • npm更加重于安装或者卸载某个模块。
  • npx能够智能的识别模块，如果模块存在，就使用。如果不存在，就临时下载，用完就删除临时文件。