npx和npm之间的区别?


516

我刚刚开始学习React,Facebook通过提供以下现成的项目来帮助简化初始设置。

如果必须安装框架项目,则必须npx create-react-app my-app在命令行中键入。

我想知道为什么Github中的Facebook会拥有npx create-react-app my-app而不是npm create-react-app my-app


23
create-react-app是一个发电机。npx进入到互联网,下载软件包暂时所以它可以执行它(NP X)。得到(和想要)的是输出,该输出保存在运行命令的本地位置。
vsync

Answers:


642

npx简介:npm包运行器

NPM- 管理软件包,执行任何任务都不容易。
NPX- 执行 Node包的工具。

NPX随附NPM版本5.2+

NPM本身并不能简单地运行任何软件包。事实上,它不会运行任何程序包。如果要使用NPM运行程序包,则必须在package.json文件中指定该程序包。

通过NPM软件包安装可执行文件时,NPM链接到它们:

  1. 本地安装在./node_modules/.bin/目录中创建了“链接” 。
  2. 全局安装具有从Linux或Windows 上的全局bin/目录(例如/usr/local/bin)创建的“链接” %AppData%/npm

您应该阅读的文档


NPM:

一个人可能会在某个项目的本地安装软件包:

npm install some-package

现在,假设您希望NodeJS从命令行执行该程序包:

$ some-package

以上将失败。只有在全球安装的软件包可以通过输入自己的名字被执行

要解决此问题并使其运行,必须输入本地路径:

$ ./node_modules/.bin/some-package

从技术上讲,您可以通过编辑packages.json文件并在以下scripts部分中添加该软件包来运行本地安装的软件包:

{
  "name": "whatever",
  "version": "1.0.0",
  "scripts": {
    "some-package": "some-package"
  }
}

然后使用npm run-script(或npm run)运行脚本:

npm run some-package

NPX:

npx将检查是否<command>存在于$PATH或本地项目二进制文件中,并执行它。因此,对于上面的示例,如果您希望执行本地安装的软件包some-package,则只需输入:

npx some-package

另一个主要优点npx是能够执行以前未安装的软件包:

$ npx create-react-app my-app

上面的示例将在命令运行的路径生成一个react应用样板,并确保您始终使用最新版本的生成器或构建工具,而不必每次使用时都进行升级。


相关问题:

  1. 如何使用在node_modules中本地安装的软件包?
  2. NPM:如何获取./node_modules/.bin文件夹?
  3. 如何使用npm脚本运行js文件?

2
所以反应不用node.js,对吧?为什么可以通过“ npm”(节点程序包管理器)使用它?
Winklerrr

3
几年前,曾有Bower用于前端程序包管理,但是它的使用大大地不赞成npm。在某些原因中,您可以只使用一个包管理器来处理与javascript相关的所有事情,还可以使用commonjs分辨率来开发前端项目。您可以检查此响应以获取更多详细信息。关于反应:不,它不直接使用节点,尽管您也可以在节点中使用它!(例如:服务器端渲染)
RecuencoJones

1
@RecuencoJones-您评论了我的答案,而不是OP
vsync

1
是的,我忘了提到@winklerrr,我在

1
我认为最有用的功能是NPX在尚未安装时安装该软件包。否则,将其添加./node_modules/.bin到$ PATH中,并且不需要NPX。
罗恩E

78

npx是一个npm软件包运行器(x可能代表eXecute)。典型的用途是临时下载或运行程序包或进行试用。

create-react-app是一个npm软件包,预计在项目的生命周期中只能运行一次。因此,最好使用npx一步安装和运行它。

正如在手册页提到https://www.npmjs.com/package/npxNPX可以运行路径或从node_modules / .bin文件默认情况下的命令。

注意: 通过一些挖掘,我们可以发现create-react-app指向在节点环境中执行的Javascript文件(在Linux系统上可能指向/usr/lib/node_modules/create-react-app/index.js)。 。这只是一个进行一些检查的全局工具。实际设置是通过react-scripts完成的,其最新版本已安装在项目中。有关更多信息,请参阅https://github.com/facebook/create-react-app


2
通常的用法是运行本地或全局已安装的版本与下载和运行软件包一样频繁。

69

NPM是一个软件包管理器,您可以使用NPM安装node.js软件包

NPX是执行node.js软件包的工具。

全局安装还是本地安装都没有关系。NPX将临时安装并运行它。如果您配置package.json文件并将其包含在脚本部分中,则NPM也可以运行软件包。

因此,请记住这一点,如果您想快速检查/运行节点程序包而不安装本地或全局使用NPX。

np M-经理

np X-执行-易于记忆


简短而明确解释
巴里斯塞尔坎AKIN

远胜于我浏览冗长的博客。
Mohan Gundlapalli

您能否详细说明一下“临时”。您是说执行命令后二进制文件被丢弃,迫使npx 每次重新下载二进制文件吗?
Jim Aho

49

NPX:

来自https://www.futurehosting.com/blog/npx-makes-life-easier-for-node-developers-plus-node-vulnerability-news/

Web开发人员可以在其开发计算机上拥有数十个项目,并且每个项目都有一组特定的npm安装依赖项。几年前,处理诸如Grunt或Gulp之类的CLI应用程序的通常建议是在每个项目中本地安装它们,并在全球范围内安装它们,以便可以从命令行轻松地运行它们。

但是,在全球范围内安装会导致解决的问题。项目可能依赖于不同版本的命令行工具,并且使用大量特定于开发的CLI工具污染操作系统也不是一件好事。如今,大多数开发人员都喜欢在本地安装工具,而不必管它。

本地版本的工具允许开发人员从GitHub中提取项目,而不必担心与全局安装的工具版本不兼容。NPM只能安装本地版本,您一切顺利。但是特定于项目的安装并非没有问题:如何在不指定工具在项目中的确切位置或使用别名的情况下运行正确版本的工具?

那就是npx解决的问题。Npx 5.2中包含的新工具npx是一个小型实用程序,足够聪明,可以在项目中调用它时运行正确的应用程序。

例如,如果您想运行项目本地版本的mocha,则可以在项目内部运行npx mocha,它将按照您的期望进行操作。

npx的一个有用的附带好处是,它将自动安装尚未安装的npm软件包。因此,正如该工具的创建者KatMarchán指出的那样,您可以运行npx benny-hill,而不必与Benny Hill污染全球环境打交道。

如果要旋转npx,请更新到npm的最新版本。


如果您使用的是nvm-windows,则使用npm可能不会获得npx,但需要手动安装!npm i -g npx
Neil

1
NPM can just install local versions- 不正确。npm可以全局安装,这是一种常见的做法。
vsync

1
有关NPX的出色介绍,请参见:KatMarchán撰写的medium.com/@maybekatz/…。
杰夫·胡

1
@vsync我认为应该将其解释为“ NPM可以简单地安装本地版本,您一切顺利。” 而不是暗示限制。
YipYip

37

npx 运行包命令而不显式安装它。

用例:

  • 您既不想在全球也不能在本地安装软件包。
  • 您无权在全球进行安装。
  • 只想测试一些命令。

句法:

npx [options] [-p|--package <package>] <command> [command-arg]...

包是可选的:

npx   -p uglify-js         uglifyjs --output app.min.js app.js common.js
      +----------------+   +--------------------------------------------+
      package (optional)   command, followed by arguments

例如:

Start a HTTP Server      : npx http-server
Lint code                : npx eslint ./src
                         # Run uglifyjs command in the package uglify-js
Minify JS                : npx -p uglify-js uglifyjs -o app.min.js app.js common.js
Minify CSS               : npx clean-css-cli -o style.min.css css/bootstrap.css style.css
Minify HTML              : npx html-minifier index-2.html -o index.html --remove-comments --collapse-whitespace
Scan for open ports      : npx evilscan 192.168.1.10 --port=10-9999
Cast video to Chromecast : npx castnow http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4

有关更多command



7

这是实际中使用NPX的示例:npx cowsay你好

如果您在bash终端中键入该内容,则会看到结果。这样做的好处是npx已临时安装了Cowsay。由于Cowsay未永久安装,因此没有包装污染。这非常适合想要避免包装污染的一次性包装。

如其他答案中所述,在需要安装(使用npm)软件包然后在运行之前对其进行配置的情况下,npx也非常有用。例如,不要使用npm来安装并配置json.package文件,然后调用已配置的run命令,而只需使用npx即可。一个真实的例子:npx create-react-app my-app


3
它在哪里安装,以及在命令完成后将其删除,还是将其缓存了一段时间,或者始终检查您是否拥有该软件包的最新版本?
redOctober13 '19

@ redOctober13有一些缓存,但是npx每次也会向npm注册表询问最新版本,因此缓存对速度没有太大帮助。并且它会扩展,然后每次都清理依赖关系。
西蒙·B。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.