NPM命令是什么？

npm 作为包管理器，类似于 Grunt 和 Gulp 等早期命令行任务运行工具，也能执行任务。在上一章节安装 Sass 包后，我们就可以开始使用它了！

指南章节

1. 本指南面向何人？
2. “npm” 究竟指什么？
3. 命令行是什么？
4. Node 是什么？
5. 包管理器是什么？
6. 如何安装 npm？
7. 如何安装 npm 包？
8. npm 命令是什么？(您当前位置！)
9. 如何安装现有的 npm 项目？

深入 npm 命令

打开测试文件夹中的 package.json 文件，目前您不会看到太多内容；只有一个 dependencies 属性，目前只有一个依赖项：

<code>{
  "dependencies": {
    "sass": "^1.43.4"
  }
}</code>

然而，package.json 文件包含的内容远不止依赖项。它还包含许多关于项目的元信息。其中最有趣的部分是一个可选但非常有用的属性，称为 scripts。

请记住，Sass 的所有子依赖项都记录在自动生成的 package-lock.json 中，不应手动编辑。package.json 通常只包含顶级依赖项，我们可以自由自定义它。

package.json 文件中的 scripts 对象允许您创建可在该项目中运行的命令，以帮助您处理各种任务，无论是单次运行还是持续运行的进程。通常，这些“任务”用于启动本地开发的开发服务器、编译资源和/或运行测试。事实上，项目中通常内置一个 start 或 dev 命令来处理您可能需要同时运行的所有任务，例如按顺序编译 Sass 和 JavaScript。

我们还没有任何要运行的脚本，但让我们来解决这个问题！

示例：将 Sass 编译成 CSS

在 package.json 文件的 scripts 部分中，我们可以访问所有已安装的包。即使我们现在无法直接在终端中键入 Sass 命令，我们也可以将 Sass 命令作为 npm 脚本的一部分运行。

如果 Sass 是全局安装的（这意味着系统范围的安装，而不是安装在特定项目文件夹中），我们可以在终端中运行 Sass 命令。到目前为止，我们只将 Sass 安装到此文件夹（这是安装包时的默认行为）。但是全局安装会使 Sass 命令在系统的任何位置都可用。

首先，将此代码块粘贴到您的 package.json 文件中，紧跟在开头的 { 花括号之后：

<code>"scripts": {
  "sass:build": "sass style.scss style.css"
},</code>

JSON 语法非常严格。如果您遇到问题，请尝试使用 JSON 验证器运行文件的内容。

这使我们可以访问 <code>npm run sass:build</code> 脚本，它将为我们编译 Sass 到 CSS！

命令的名称并不重要，只要它是一个连续的字符串即可。还值得注意的是，冒号 (:) 在此处没有任何特殊作用；这只是一个约定，因为单独使用 build 或 sass 可能过于通用。

如果您以前使用过 Sass 命令（或者您提前查看了），您可能知道这意味着我们还需要在项目文件夹的根目录中创建一个 style.scss 文件。让我们这样做，并将一些任意的 Sass 代码放入其中。

如果您想复制和粘贴，这是我使用的 Sass 代码：

<code>$myColor: #ffd100;

.a {
  .nested {
    .selector {
      color: $myColor;
    }
  }
}</code>

太棒了！将该文件保存为项目根目录下的 style.scss，然后让我们尝试运行新的命令：

<code>npm run sass:build</code>

此任务完成后，您应该会立即看到项目文件夹中出现两个新文件：style.css 和 style.css.map。

如果您愿意，您可以打开 style.css 文件（其中包含编译后的 CSS 代码）以验证它是否确实是我们期望的：

Sass 包甚至会为我们编译一个源映射，这让我们可以在浏览器的 DevTools 中检查样式时查看哪些样式来自哪些 .scss 文件。真棒！

如果您遇到错误：请仔细检查 package.json 中的语法，确保它是有效的 JSON（您可以使用此处的在线 JSON 验证器），并且您的 .scss 文件包含有效的 Sass（这是一个在线 Sass 转换器）。另一件要检查的事情是文件名与命令中的文件名是否匹配。

创建仅限开发的命令

这很不错，但是当我们进行开发时，我们可能会厌倦一遍又一遍地运行该命令。因此，让我们设置第二个命令，告诉 Sass 为我们监视该文件，并在我们保存更改时自动重新编译它！

在 package.json 中的 scripts 对象内添加以下内容：

<code>"sass:watch": "sass style.scss style.css --watch"</code>

重要说明：确保两个脚本之间有一个逗号 (,)。顺序无关紧要，但它们之间的逗号很重要。同样，JSON 非常严格，因此如有需要，请依赖 JSON 验证器。

现在，如果我们运行 sass:watch（不要与 sasquatch 混淆），您将在终端中看到一条消息，显示“Sass 正在监视更改。按 Ctrl-C 停止”。

如果您现在打开 style.scss 文件，进行更改并保存，您应该会看到终端中自动弹出一条消息，确认 Sass 已重新编译为 CSS：

现在这才是有用的！不仅如此，一旦我们将这些文件提交到我们的存储库，我们将拥有安装和运行 Sass 的确切说明，并使用一个简单的命令——其他所有参与此项目的人也将拥有！

我们将在此测试项目中结束。看到如何开始很有用，但大多数情况下，您将使用预配置的项目，而不是从头开始创建 npm 命令，这正是我们将在本 npm 指南的最后一章中要做的。

安装 npm 包的最终说明

您应该知道，实际上有两种方法可以安装 npm 包，您想要哪一种取决于该包是否应作为生产构建的一部分，或者它是否纯粹用于开发目的。

• npm install（或 npm i）是将包添加到项目的标准（和默认）方法。
• npm install --save-dev（或 npm i -D）仅将包添加到您的“开发依赖项”，这意味着它们仅在开发项目时才会安装，而不会在构建项目的最终生产版本时安装。

作为开发依赖项安装的包可能包括测试库、代码检查工具、预览服务器和其他仅在开发过程中帮助您的工具。它们通常不用于编译或运行网站本身。

还有一个最终标志值得了解：npm install --global（或 npm i -g）。这就是全局安装包的方式，正如我们在前面安装 Sass 时所讨论的那样。例如，如果您希望能够在机器上的任何位置运行 sass，则可以使用此方法。全局安装的其他常见用例可能包括您希望在任何地方使用的 CLI 工具，甚至另一个包管理器，如 Yarn。

接下来的步骤

我们即将完成旅程！还有一件事您应该知道，以及如何使用 npm 快速启动现有项目所需的一切。因此，假设您继承了一个使用 npm 的项目。你从哪里开始？你如何确保与他人持续合作？这是本 npm 指南最后一节的重点。

← 第 7 章 第 9 章 →

以上是NPM命令是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！