[npm] npx 介绍与使用说明

[npm] npx 介绍与使用说明

  • [npm 的由来](#npm 的由来)
  • [npx 是什么?](#npx 是什么?)
  • [npx 特点](#npx 特点)
  • [npx 的特点](#npx 的特点)

npm 的由来

说到 npm 就离不开社区文化,那什么是社区文化?

社区文化的意思是:拥有共同职业或兴趣的人群,自发组织在一起,通过分享信息和资源进行合作与交流。虚拟社区的参与者经常会在线讨论相关话题,或访问某些网站。

世界上最大的社区应该就是 GitHub。通过 GitHub 来分享源代码(线上代码仓库), 通过问题清单(Issues 列表)收集源代码使用过程中遇到的问题以及添加新的特征等。加入社区最大的好处之一是,你可以使用别人贡献的代码,你也可以贡献代码给别人用。

那么在 GitHub 还没有兴起的年代是怎么共享代码的呢?通过网址来共享代码。比如你想使用 jQuery,那么你点击 jQuery 网站上提供的链接就可以下载 jQuery,放到自己的网站上使用。

GitHub 兴起之后,社区中也有使用 GitHub 的下载功能。但是当一个项目依赖的代码越来越多,程序员发现这是一件很麻烦的事情,例如:

1.去 jQuery 官网下载 jQuery

2.去 BootStrap 官网下载 BootStrap

3.去 Underscore 官网下载 Underscore

等等需要依赖的代码,有些程序员就受不鸟了,一个程序员 Isaac Z. Schlueter (以下简称 Isaaz)给出了一个解决方案:用一个工具把这些代码集中到一起来管理吧!这个工具就是他用 JavaScript (运行在 Node.js 上)写的 npm,全称是 Node Package Manager

npm 的思路大概是这样的:

  1. 买个服务器作为代码仓库(repository),在里面放所有需要被共享的代码
  2. 发邮件通知 jQuery 、Bootstrap 、Underscore 的作者使用 npm publish 把代码提交到 repository 上,分别取名 jquery、bootstrap 和 underscore(注意大小写)
  3. 社区里的其他人如果想使用这些代码,就把 jquery、bootstrap 和 underscore 写到 package.json 里,然后运行 npm install ,npm 就会帮他们下载代码。
  4. 下载完的代码出现在 node_modules 目录里,就可以随意使用了。
    这些可以被使用的代码被叫做「包」(package),这就是 npm 名字的由来:Node Package(包) Manager(管理器)。

npx 是什么?

npx 是一个工具,它是 npm v5.2.0 引入的一条命令(npx),是 npm 的一个包执行器,指在提高从 npm 注册表使用软件包时的体验 ;

npm 非常容易地安装和管理托管在注册表上的依赖项

就像 npm 极大地提升了我们安装和管理包依赖的体验,在 npm 的基础之上,npx 让 npm 包中的命令行工具和其他可执行文件在使用上变得更加简单

npx 特点

主要包括以下特点:

  1. 可以临时安装可执行依赖包,不用全局安装,不用担心长期的污染
  2. 可以执行依赖包中的命令,如果执行目录下没有该包,则先安装完成再自动运行
  3. 可以自动加载执行命令所在路径的 node_modules/.bin 和环境变量$PATH 里面的命令
  4. 可以指定 node 版本、命令的版本,解决了不同项目使用不同版本的命令的问题

npx 的特点

npx 的特点详细说明

项目安装包的使用

npx 想要解决的主要问题,就是调用项目内部安装的模块。

我们知道当我们想要使用一个工具包的命令的时候,我们需要全局安装工具包,然后再执行该工具包的命令,但是如果我们只是当前项目需要使用,那么工具包都全局安装,久了会导致全局目录越来越庞大,npx 可以解决该问题

比如,项目内部安装了测试工具 Mocha。

shell 复制代码
npm install -D mocha

一般来说,调用 Mocha ,只能在项目脚本和 package.json 的 scripts 字段里面, 如果想在命令行下调用,必须像下面这样:

项目的根目录下执行

shell 复制代码
node  node-modules/.bin/mocha --version

npx 就是想解决这个问题,让项目内部安装的模块用起来更方便,只要像下面这样调用就行了。

shell 复制代码
npx mocha --version

npx 的原理很简单,就是运行的时候,会到 node_modules/.bin 路径和环境变量 P A T H 里 面 , 检 查 命 令 是 否 存 在 。 由 于 n p x 会 检 查 环 境 变 量 PATH里面,检查命令是否存在。 由于 npx 会检查环境变量 PATH里面,检查命令是否存在。由于npx会检查环境变量PATH,所以系统命令也可以调用。

等同于 ls

shell 复制代码
 npx ls

注意,Bash 内置的命令不在$PATH 里面,所以不能用。比如,cd 是 Bash 命令,因此就不能用 npx cd。

全局安装包的避免

除了调用项目内部模块,npx 还能避免安装临时使用的全局模块。比如,我临时需要使用 create-react-app 这个模块,但是仅仅使用一次,之后都用不到了,那么如果全局安装,会造成存储资源的浪费,虽然事后可以删除但是我需要多操作一步,并且不能忘记,而 npx 可以使用该工具包,并且使用完成后自动删除。

shell 复制代码
 npx create-react-app my-react-app

上面代码运行时,npx 将 create-react-app 下载到一个临时目录,使用以后再删除。所以,以后再次执行上面的命令,会重新下载 create-react-app。

指定工具包版本

下载全局模块时,npx 允许指定版本。

shell 复制代码
 npx uglify-js@3.1.0 main.js -o ./dist/main.js

上面代码指定使用 3.1.0 版本的 uglify-js 压缩脚本。

注意,只要 npx 后面的模块无法在本地发现,就会下载同名模块。比如,本地没有安装 http-server 模块,下面的命令会自动下载该模块,在当前目录启动一个 Web 服务。

shell 复制代码
npx http-server

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

如果想让 npx 强制使用本地模块,不下载远程模块,可以使用--no-install 参数。如果本地不存在该模块,就会报错。

shell 复制代码
 npx --no-install http-server

反过来,如果忽略本地的同名模块,强制安装使用远程模块,可以使用--ignore-existing 参数。比如,本地已经全局安装了 create-react-app,但还是想使用远程模块,就用这个参数。

shell 复制代码
 npx --ignore-existing create-react-app my-react-app

使用不同版本的 node

利用 npx 可以下载模块这个特点,可以指定某个版本的 Node 运行脚本。它的窍门就是使用 npm 的 node 模块。

shell 复制代码
 npx node@0.12.8 -v//v0.12.8

上面命令会使用 0.12.8 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node,使用后再删掉。

某些场景下,这个方法用来切换 Node 版本,要比 nvm 那样的版本管理器方便一些。

-p 参数

-p 参数用于指定 npx 所要安装的模块,所以上一节的命令可以写成下面这样。

shell 复制代码
 npx -p node@0.12.8 node -v
#v0.12.8

上面命令先指定安装node@0.12.8,然后再执行 node -v 命令。

-p 参数对于需要安装多个模块的场景很有用。

shell 复制代码
npx -p lolcatjs -p cowsay [command]

-c 参数

如果 npx 安装多个模块,默认情况下,所执行的命令之中,只有第一个可执行项会使用 npx 安装的模块,后面的可执行项还是会交给 Shell 解释。

shell 复制代码
 npx -p lolcatjs -p cowsay 'cowsay hello | lolcatjs'

实战应用

上面代码中,cowsay hello | lolcatjs 执行时会报错,原因是第一项 cowsay 由 npx 解释,而第二项命令 localcatjs 由 Shell 解释,但是 lolcatjs 并没有全局安装,所以报错。

-c 参数可以将所有命令都用 npx 解释。有了它,下面代码就可以正常执行了。

shell 复制代码
npx -p lolcatjs -p cowsay -c 'cowsay hello | lolcatjs'

-c 参数的另一个作用,是将环境变量带入所要执行的命令。举例来说,npm 提供当前项目的一些环境变量,可以用下面的命令查看。

shell 复制代码
npm run env | grep npm_

-c 参数可以把这些 npm 的环境变量带入 npx 命令。

shell 复制代码
npx -c 'echo "$npm_package_name"'

上面代码会输出当前项目的项目名

执行 GitHub 源码

npx 还可以执行 GitHub 上面的模块源码

shell 复制代码
# 执行 Gist 代码

npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32

# 执行仓库代码
 npx github:piuccio/cowsay hello

注意,远程代码必须是一个模块,即必须包含 package.json 和入口脚本

相关推荐
滚雪球~13 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语13 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
风度前端15 小时前
理解npm中的包和模块
前端·npm
敲啊敲95271 天前
5.npm包
前端·npm·node.js
蜜獾云2 天前
npm淘宝镜像
前端·npm·node.js
dz88i82 天前
修改npm镜像源
前端·npm·node.js
小王码农记2 天前
解决npm publish发布包后拉取时一直提示 Couldn‘t find any versions for “包名“ that matches “版本号“
前端·npm·node.js
樊南3 天前
npm安装electron依赖时卡顿,下载不下来
前端·electron·npm
没头发的卓卓4 天前
pnpm--他简直是超人!
前端·npm·前端工程化
changingshow5 天前
vue create 创建项目 提示 Failed to check for updates 淘宝 NPM 镜像站喊你切换新域名啦
javascript·vue.js·npm