npm 命令到底是什么？

如您所知，npm 是一个 包管理器。但与在命令行中运行任务的类似早期工具（如 Grunt 和 Gulp）一样，npm 也可以运行任务，这对我们来说非常完美，因为现在我们在 上一章 中安装了 Sass 包，我们现在就可以开始使用它了！

指南章节

1. 这个指南到底适合谁？
2. “npm”到底是什么意思？
3. 命令行到底是什么？
4. Node 到底是什么？
5. 包管理器到底是什么？
6. 如何安装 npm？
7. 如何安装 npm 包？
8. npm 命令到底是什么？ （您现在就在这里！）
9. 如何安装现有的 npm 项目？

深入 npm 命令

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

{
  "dependencies": {
    "sass": "^1.43.4"
  }
}

但是，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 文件中，紧接在打开的 { 花括号之后

"scripts": {
  "sass:build": "sass style.scss style.css"
},

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

这使我们能够使用 npm run sass:build 脚本，该脚本将为我们编译 Sass 成 CSS！

命令的名称无关紧要，只要它是一个连续的字符串即可。还值得注意的是，冒号 (:) 在这里没有任何特殊作用；它只是一个约定，因为 build 或 sass 本身可能会过于通用。

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

以下是我使用的 Sass 代码，如果您想复制并粘贴它

$myColor: #ffd100;

.a {
  .nested {
    .selector {
      color: $myColor;
    }
  }
}

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

npm run sass:build

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

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

sass 包甚至为我们编译了 源映射，这让我们在浏览器 DevTools 中检查样式时可以看到哪些样式来自哪些 .scss 文件。多么棒啊！

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

创建仅限开发的命令

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

将此添加到 package.json 中的 scripts 对象中

"sass:watch": "sass style.scss style.css --watch"

**重要提示：**确保两个脚本之间有一个逗号 (,)。顺序无关紧要，但它们之间的逗号很重要。同样，JSON 很严格，因此如有必要，请使用 JSON 验证器。

现在，如果我们运行 sass:watch（不要与 sasquatch 混淆），您将在终端中看到一条消息，内容为“Sass is watching for changes. Press Ctrl-C to stop.”。

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

现在这很有用！不仅如此，而且一旦我们将这些文件提交到我们的存储库，我们就会拥有安装和运行 Sass 的确切说明，只需一个简单的命令——其他所有在这个项目中工作的人也是如此！

我们将在此测试项目中停止操作。看到如何开始很有用，但更常见的是，您将使用预配置的项目，而不是从头开始创建 npm 命令，这正是我们在本 npm 指南的 最后一章 中将要做的。

关于安装 npm 包的最后说明

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

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

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

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

下一步

我们已经接近旅程的尾声！还有一件事你应该知道，以及如何使用 npm 在现有项目上快速启动你所需的一切。所以，假设你继承了一个使用 npm 的项目。你从哪里开始？如何确保你与他人一致地协作？这是本 npm 指南最后一节的重点。