web 前端培训创建 NPX 工具

​

NPM（代表 Node Package Manager）被 Web 开发人员广泛用于安装和管理各种 JavaScript 库。这是当今很多网站的必需品，它默认随 Node.js 一起安装。

但是，您可能已经看到很多库或框架指示您在安装它们的包时使用 NPX。React 甚至有一个警告，向开发人员澄清使用 NPX 不是错字。

NPX 是一个包运行器，它允许您运行托管在 NPM 上的 CLI 工具或可执行文件，而无需先使用 NPM 安装它们。

例如，以前您需要在系统上全局安装 create-react-app，然后运行 create-react-app my-website。

从 NPM v5.2 开始，就不需要全局安装 create-react-app 了（建议不要安装）。您可以简单地运行 npx create-react-app my-website，然后运行相同的脚本来创建您的 React 应用程序。

在本教程中，您将学习如何创建自己的 NPX 工具。您将通过本教程创建的工具非常简单——它只会将 2 个或更多数字相乘。您还将了解如何在本地使用您的工具，以及如何在 NPM 仓库上发布它以供其他人使用_前端培训。

先决条件

这很明显，您需要安装 Node.js 才能完成本教程。安装 Node.js 会依次安装 NPM 和 NPX。

开始

创建一个新目录来保存您的工具：

mkdir multiply-tool

接下来，使用 NPM 初始化您的项目：

npm init

您将被问到一些关于包的问题，例如包名称和作者姓名。填写完成后，会在当前目录下创建一个 package.json 文件。

创建 Bin 文件

当您创建 CLI 工具或可执行文件时，您需要创建一个文件并将其包含在您的 package.json 中 bin 字段下。

创建目录 bin 并在该目录中创建具有以下内容的文件 index.js：

#! /usr/bin/env node

console.log("Hello, World!");

这个文件（现在）要做的就是打印“Hello，World！”到您的命令行或终端。但是，这里要注意的重要一点是以下行：

#! /usr/bin/env node

应将此行添加到将通过命令行执行的所有文件中。它被称为 Shebang，基本上，它指定文件应该传递给哪个解释器以便在类 Unix 系统中执行。

接下来，在 package.json 中添加新字段 bin：

"bin": {

"multiply": "bin/index.js"

},

这意味着当用户运行 npx <package_name> 脚本 bin/index.js 将运行。

本地测试

要在本地测试它，首先，在您的系统中全局安装包：

npm i -g

您应该在包含您的包的目录中运行此命令。

然后，在您的终端中，运行以下命令来运行您的 NPX 工具：

npx multiply

这里，multiply 是包的名称。如果您将包命名为其他名称，请务必输入包的名称。

运行命令时，您将看到“Hello, World!”打印在您的终端中。

使用参数

在本节中，您将实现 multiply 包的功能。这个包应该至少接受两个参数（如果参数小于 2，用户会得到一个错误）。然后，它将乘以所有参数。如果结果为 NaN，则意味着至少有一个参数不是数字，在这种情况下用户也会看到错误。

将 bin/index.js 的内容替换为以下内容：

#! /usr/bin/env node

const args = process.argv.slice(2);

if (args.length < 2) {

console.error('Please enter at least 2 numbers');

process.exit(1); //an error occurred

}

const total = args.reduce((previous, current) =>parseFloat(current) * parseFloat(previous));

if (isNaN(total)) {

console.error('One or more arguments are not numbers');

process.exit(1); //an error occurred

}

console.log(total);

process.exit(0); //no errors occurred

需要注意的几点：

1. process.argv 用于检索命令行参数。前两个参数将是运行此脚本的解释器（在本例中为 Node），第二个参数是包的名称（在本例中为乘法）。传递的任何其他参数将从索引 2 开始可用。因此，要获取用户传递的参数，您需要对数组 process.argv 进行切片并获取从索引 2 开始的元素。

2. 当发生错误时，您可以使用 process.exit(1) 来指示。如果 process.exit 接收到的值不是 0，则意味着 CLI 工具中发生了错误。

3. reduce 数组函数用于将数组中的所有项一一相乘。

4. 如果 total 的最终结果是 NaN，用户会得到一个错误。

5. 如果一切顺利，将打印出结果，进程退出，0 表示进程成功结束。

让我们测试一下。在您的终端中再次运行该命令，并传递 2 个数字：

npx multiply 3 15

您将在终端中看到乘法的结果。

您也可以尝试添加 2 个以上的数字，您会看到结果。要查看错误消息的工作原理，请尝试输入少于 2 个数字或输入字符串而不是数字。

发布包

现在您的工具已准备就绪，您可以在 NPM 上发布它。此步骤需要一个 NPM 帐户，因此如果您没有，请务必创建一个。

然后，在您的终端中，运行以下命令以使用您的 NPM 帐户登录：

npm login

系统将提示您输入用户名和密码。如果一切正确，您将登录，然后可以发布您的工具。

要发布您的工具，只需运行：

npm publish

注意：如果您的项目使用 GitHub 存储库，请确保在运行此命令之前提交所有内容。

这会将您的工具发布到 NPM 注册表中。请注意，如果创建了另一个具有相同名称的包，您需要在 package.json 中更改包的名称，然后再次尝试发布。

使用您发布的包

要使用您发布的包，您可以运行之前在运行本地命令时使用的相同命令：

npx <package_name>

请注意，在这种情况下，您不需要全局安装软件包，您可以通过 NPX 运行它。

就我而言，我不得不将我的包重命名为 multiply-tool，因为 NPM 注册表中已经存在 multiply。然后，我运行以下命令：

npx multiply-tool 3 15

并得到乘法的结果：

更新您的包

要更新您的软件包，您可以使用以下命令：

npm version <type>

其中 <type> 确定如何增加版本。它可以是以下值之一：

1. patch：这将增加您版本中的最后一个数字，这通常意味着一个小的变化。例如，它将版本从 1.0.0 更改为 1.0.1。

2. minor：这将增加您版本中的第二个数字，这通常意味着较小的更改，不一定会影响用户使用此工具的方式。例如，它将版本从 1.0.0 更改为 1.1.0。

3. major：这将增加您版本中的第一个数字，这通常意味着发生了可能影响此工具使用方式的重大更改。例如，它将版本从 1.0.0 更改为 2.0.0。

运行上述命令后，再次运行发布命令：

npm publish

您的工具将被更新。

文章来源于前端全栈开发者

​