npx的使用学习和优化

发布于 2020-11-04  804 次阅读


从Node5.2开始,Node开始自带 npx 模块,我们也经常会在 react 官方教程中看到 npx 的身影,但具体是用来做什么的,它可以在哪些地方帮助到我们呢?

为什么使用npx

npx 是执行Node软件包的工具,它从 npm5.2 版本开始,就与 npm 捆绑在一起。

npx 的作用主要有:

  • 避免全局安装,特别是某些个别项目需要或很少使用的包(不会污染本机)
  • 可以任意指定包版本或node的版本(版本切换自由)

全局安装劣势

全局安装我们都很熟悉,它主要有以下劣势:

  1. 占用本机空间,npm 会在全局路径中存放所有global安装的包, node_module 占用的空间比较大的
  2. 版本问题,全局安装后调用时不能指定版本,比如 live-server 你的本地不会存在多个版本

我们该怎么使用

调用项目内部的局部模块

一般来说我们会将全局的 npm 模块加入环境变量,而每个项目内的模块太过分散,不可能加入环境变量。

这导致我们必须在 package.json 中编写 script 来简化脚本或是......

这样使用局部模块:

node-modules/.bin/mocha --version

有了 npx 我们可以这样轻松调起

npx mocha --version

原理是,因为 npx 在每次运行时检查 node_modules/.bin 文件夹和 $PATH 环境变量中命令是否存在

因为npx会检查环境变量,所以一些系统命令也可以使用npx调用

避免全局安装模块

npx 可以帮助我们避免全局安装模块,如 create-react-app 这个模块通常我们需要全局安装,但是有了 npx 我们可以避免全局安装而直接调起它

npx create-react-app my-react-app

当npx在本地( node_modules/.bin 文件夹和 $PATH 环境变量 )无法发现,npx会下载同名模块到本地临时目录中,在使用后删除

--no-install 参数和--ignore-existing 参数

--no-install 会强制使用本地模块,如果本地不存在则报错

npx --no-install http-server

--ignore-existing 恰恰相反,强制使用远程模块,比如本地已经有 http-server 但是你想用远程的,就可以使用这个参数

npx --ignore-existing http-server

任意切换版本

嗯,既然 npx 的命令可以远程下载下来,并且是下载到临时目录,那是否就不存在版本管理的问题了呢?既然如此,我们当然可以任意切换版本

npx 中我们可以像安装时一样任意指定使用的版本

npx @vue/cli@4.5.5 --version

当然, 利用 npx 可以下载模块这个特点 ,你也可以任意的切换你的node版本(使用 npmnode 模块 )

npx -p node@6 -v  //输出 6.14.4
npx -p node@6 

npx安装太慢了?

npx 安装使用的是 npm 的安装源,我们需要将 npm 的源更换为淘宝源

npm config set registry https://registry.npm.taobao.org

注:是换源为淘宝源而非使用cnpm

提示未找到命令?

若你本地没有这个模块,第一次使用需要使用模块名称而非快捷名称

vue_cli,在直接使用 vue create 会报错

command not found: vue

我们可以使用:

npx @vue/cli create project-name

结语

有了 npx,我们可以抽出时间来对原有的全局模块进行整理,将一些不常用的卸载掉,在使用时再用 npx 执行

整理全局包常用命令:

//列出全局模块
npm list -g --depth 0
//卸载全局模块
npm uninstall -g <package>

最后,祝大家编程愉快~


一个爱搞事情的前端,一个爱玩技术的程序员