65.9K
CodeProject 正在变化。 阅读更多。
Home

npm vs npx

Sibeesh Passion
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2018年10月20日

CPOL

5分钟阅读

viewsIcon

14760

探讨使用 npx 而不是 npm 是否有任何好处。

引言

我们都在使用 npm 作为包管理器，它很简单，对吧？但随着 npm@5.2.0 版本的发布，当你安装 npm 时，它会安装一个名为 npx 的新包。你有没有想过它是什么？以及为什么需要它？使用 npx 而不是 npm 有什么好处吗？我知道你一直在寻找上述问题的答案，最后你来到了这个页面。我会尽力为你解答这些问题。在文章的最后，我确信你将能够找到这些问题的答案。希望你会发现这篇博文很有用。

源代码

源代码可以在 这里 找到。

背景

我当时正在尝试创建一个 React 应用程序，正如你所知，我们可以借助 react-app 命令非常轻松地创建 React 应用程序。但是当我访问 create React app 的官方 Github 文档时，文档中提到我们可以使用 npx 或 npm。我当时只是在想它们有什么区别？这个问题促成了这篇文章的诞生。

我们将要做什么

我们将创建两个应用程序，并在两个应用程序中都安装 mocha 包，以便我们可以运行一些测试。如果你不知道 mocha 是什么，访问 官方网站 会是个不错的选择。

  1. mocha-example-npm
  2. mocha-example-npx

使用 mocha-example-npm 应用程序进行编码

让我们尝试创建一个名为 mocha-example-npm 的新文件夹，并在我最喜欢的代码编辑器 VSCode 中打开它。打开文件夹后，你可以通过运行以下命令来安装 mocha：

npm install mocha

让我们创建一个名为 test 的文件夹

mkdir test

让我们创建一个名为 test.js 的文件。

code test/test.js

并在其中粘贴以下示例测试。

var assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1,2,3].indexOf(4), -1);
    });
  });
});

看到代码后，你可能已经发现测试会通过，因为 indexOf (4) 的结果将是 -1。那么我们如何检查这一点呢？所以要运行测试，我们需要运行 mocha，对吧？让我们试试。

如果你只在终端中输入 mocha，你会收到如下错误：

mocha : The term 'mocha' is not recognized as the name of a cmdlet, function, 
        script file, or operable program. Check the spelling of the name, or if a path
        was included, verify that the path is correct and try again.
At line:1 char:1
+ mocha
+ ~~~~~
    + CategoryInfo          : ObjectNotFound: (mocha:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

它说 mocha 不是一个被识别的命令。要解决此问题，你有以下三个选项：

  1. 全局安装 mocha，这样命令就可以被全局识别。
    • npm@6.1.0 C:\Program Files (x86)\nodejs\node_modules\npm
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> npm i mocha -g
C:\Users\Sibeesh\AppData\Roaming\npm\mocha -> 
   C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\mocha
C:\Users\Sibeesh\AppData\Roaming\npm\_mocha -> 
   C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\_mocha
+ mocha@5.2.0
added 24 packages from 436 contributors in 3.458s
PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> npm list -g mocha
C:\Users\Sibeesh\AppData\Roaming\npm
`-- mocha@5.2.0

PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm> mocha

  Array
    #indexOf()
      √ should return -1 when the value is not present

  1 passing (14ms)

PS F:\SibeeshPassion\Articles\NPMvsNPX\npm\mocha-example-npm>
  2. 使用 node_modules 中 mocha 的路径。
    • ./node_modules/mocha/bin/mocha
  3. 在你的 package.json 文件中进行如下配置测试：
    • "scripts": {
    "test": "mocha"
  }

      这样你就可以运行 npm test 命令，它将从你的 node_modules 文件夹中获取 mocha 文件。

使用 mocha-example-npx 应用程序进行编码

好了，我们已经理解了使用 npm 时遇到的问题，并且有三种解决方案。现在，让我们尝试使用 npx 而不是 npm。让我们打开文件夹并运行 npx mocha。结果是一个警告，因为它正在尝试在解决方案中查找 test 文件夹，然后查找测试。

npx: installed 24 in 6.203s
Warning: Could not find any test files matching pattern: test
No test files found

让我们创建一个 test 文件夹，一个 test.js 文件，并在其中编写一个测试。

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> mkdir test

    Directory: F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       20-10-2018  06:26 PM                test


PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> code test/test.js
PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>

现在让我们运行 npx mocha 命令，你会得到如下输出：

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npx mocha
npx: installed 24 in 4.142s

  Array
    #indexOf()
      √ should return -1 when the value is not present

  1 passing (12ms)

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>

正如你所看到的，我们的测试通过了。但是你看到任何 node_modules 文件夹或者任何包被添加到你的解决方案了吗？

什么是 npx

现在让我们来总结一下 npx 是什么。它是一个 npm 包运行器。我们都知道我们从 npm 注册表位置安装包到我们的解决方案中使用它。而 npx 的设计方式是，我们可以直接从 npm 注册表使用包，甚至无需将其安装到我们的解决方案中。你可能会想，为什么需要它？

我给你举个例子，正如我在本文的背景部分提到的，我们可以借助 Facebook 的 Create-React-App 来创建一个简单的 React 应用程序。而这个工具只用于创建应用程序，一旦我们创建了应用程序，我们就再也不需要它了。如果你使用 npm，你必须在全局或本地安装这个包，否则你会收到错误。

如果我们能直接从 npm 注册表使用这个 create-react-app 包并在本地机器上创建应用程序，那不是很棒吗？这就是 npx 发挥作用的地方。借助 npx，我们可以减小 node_modules 的大小，我坚信这是一个巨大的好处。

它足够智能，可以识别你试图从 npm 注册表获取的包是否已在你机器上，无论是全局还是本地安装。如果包在你机器上可用，它将从那里获取。

如果 Mocha 已全局或本地安装，我们运行命令 npx Mocha 会怎样？

让我们尝试全局安装 mocha 并运行命令 npx mocha。在此之前，让我们先确保我们尚未安装 mocha。

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm list mocha
mocha-example-npx@1.0.0 F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx
`-- (empty)

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm list -g mocha
C:\Users\Sibeesh\AppData\Roaming\npm
`-- (empty)

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>

现在让我们全局安装 mocha

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npm i mocha -g
C:\Users\Sibeesh\AppData\Roaming\npm\mocha -> 
   C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\mocha
C:\Users\Sibeesh\AppData\Roaming\npm\_mocha -> 
   C:\Users\Sibeesh\AppData\Roaming\npm\node_modules\mocha\bin\_mocha
+ mocha@5.2.0
added 24 packages from 436 contributors in 3.033s

再次尝试运行 npx mocha

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx> npx mocha

  Array
    #indexOf()
      √ should return -1 when the value is not present

  1 passing (12ms)

PS F:\SibeeshPassion\Articles\NPMvsNPX\npx\mocha-example-npx>

你看到区别了吗？你没有收到任何与安装相关的信息（例如 npx: installed 24 in 4.142s）。

结论

非常感谢您的阅读。我很快会带来关于同一主题的另一篇文章。你认为有什么我遗漏的吗？你觉得这篇文章有用吗？希望你喜欢这篇文章。请给我您的宝贵建议和反馈。

现在轮到你了。你有什么想法？

没有评论的博客算不上博客，但请尽量就事论事。如果你有一个与本帖无关的问题，最好将其发布到 C# Corner、Code Project、Stack Overflow、ASP.NET 论坛，而不是在此评论。请在下面的评论部分提出您的问题，如果我能帮忙，我一定会尽力。

历史

  • 2018年10月20日：初版
© . All rights reserved.