作为初学者我会喜欢的 NPM 指南

2025-05-27

作为初学者我会喜欢的 NPM 指南

作为一名初级开发者，我曾经在使用 NPM 时遇到过很多困难。你还记得自己复制粘贴所有 npm 命令却不知道它们的作用吗？或者你第一次打开 package-lock.json 时惊慌失措的场景吗？如果我告诉你package.json 中
有一个可以设置的bugs属性，你会怎么办？

从那时起就不再需要害怕了，我们将一起学习 NPM 的基础知识。

免责声明：本文将遵循我从零开始重新学习的过程。如果您不想阅读 NPM 的含义等，请直接跳到特定部分。

目录

一点背景知识

让我们从基础开始，NPM 到底是什么意思？它代表Node 包管理器，顾名思义，它负责管理 Node 应用程序中的包。

NPM 现在被视为 Javascript 生态系统的重要组成部分，它提供了一种简单的方法来管理我们在项目中需要使用的所有外部依赖项，只需一个非常简单的命令：npm install。

我将跳过 NPM 的安装，Node 网站会向您适当解释，并且这不是本文的核心。

我就直接跳到 npm 命令了。我们开始吧。

初始化

当我输入第一个 npm 命令时，我完全不知道发生了什么，尽管这是 NPM 的核心。让我们详细了解一下。

首先，我们需要创建一个基于节点的应用程序，这就像运行以下命令一样简单。

    npm init
Enter fullscreen mode Exit fullscreen mode

系统会提示我们一些关于项目的问题，例如项目名称、Git 仓库链接等等。现在，我们先跳过这些问题，直接按 Enter 键。

等待，使用。

    npm init -y
Enter fullscreen mode Exit fullscreen mode

令人惊奇的是，我们跳过了所有问题。

所以，我们现在有一个包含一些信息的package.json 。

{
  "name": "your_directory_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
Enter fullscreen mode Exit fullscreen mode

这个文件可以看作是我们应用程序的身份证。它包含应用程序的名称、当前版本、简短的描述、一些帮助其他人找到它的关键字，以及其他一些内容。

（有关属性的完整列表，包括我们讨论过的‘bugs’关键字，请参阅官方文档）。

您还可以随时自由更新它，只要您遵循 JSON 格式并使用正确的属性。

接下来，我们要启动我们的应用程序，对吗？

脚本

让我们看一些例子。我假设你至少使用过一次基于 Express 的应用程序，或者某个流行的 JS 前端框架（例如 React、Angular 或 Vue）。

此脚本属性使您能够自定义在应用程序中使用的 npm 命令。

等一下……那是我每天使用的npm start定义的地方吗？没错。

"scripts": {
    "start": "node index.js"
  }
Enter fullscreen mode Exit fullscreen mode

您可以在此处指定任何有效的 Shell 命令，并根据需要创建任意数量的条目。您甚至可以组合它们！

"scripts": {
    ...,
    "stuffA:" : "...",
    "stuffB": "...",
    "together" : "npm run stuffA & npm run stuffB"
  }
Enter fullscreen mode Exit fullscreen mode

（请注意，这将并行运行您的脚本。要同时运行，请将“&”替换为“&&”，或者查看Concurrently 包）。

现在，一起运行 npm run 吧！没错，这不是拼写错误，你需要写上run关键字。事实上，即使是 npm start 命令，在后台也是以npm run start 的形式启动的。（此功能与其他几个关键字共享，例如 install、test……）

你还在吗？好的，让我们继续深入，通过添加一些依赖项来释放 NPM 的全部威力！

管理依赖项

如今，几乎所有东西都有 npm 包了。如果不使用它们，每次都要重新构建轮子，那真是太可惜了。

这可能是 package.json 的最大作用，它将跟踪项目中的所有依赖项，包括版本。

    npm install <package_name>
Enter fullscreen mode Exit fullscreen mode

此命令将下载所有需要的文件，并将它们安装到一个新的node_modules文件夹中。
随着你安装越来越多的软件包（这些软件包本身很可能依赖于其他软件包，而这些软件包也会被安装），这个文件夹会变得越来越大。

请不要犯和我一样的错误，并防止将此文件夹提交到您的存储库！

//.gitignore file at your project root

node_modules
Enter fullscreen mode Exit fullscreen mode

依赖项和 DevDependencies

同时，在你的 package.json 中......

"dependencies": {
    "express": "^4.17.1" <--- Package version
},
"devDependencies": {
    "eslint": "^7.13.0"
}
Enter fullscreen mode Exit fullscreen mode

这是什么？其实很简单。每当你通过 npm install 命令安装某个东西时，它都会把它列在那里。这样，当你与世界分享你的精彩项目时，其他开发者只需启动npm install，你的项目运行所需的所有库就会顺利安装。

那么，devDependencies 是什么呢？所有对你的应用不重要的、应该从生产版本中移除的东西（比如你的 linter）都会放在那里。小心，你必须自己管理它们。

默认情况下， npm install 命令会将所有内容放入常规依赖项中。要将某些内容放入 devDependencies 中，必须向命令传递一个额外的参数：

    npm install --save-dev <your_library>
Enter fullscreen mode Exit fullscreen mode

或者

    npm install -D <your_library>
Enter fullscreen mode Exit fullscreen mode

或者更短

    npm i -D <your_library>
Enter fullscreen mode Exit fullscreen mode

整理好依赖项将提升生产性能。你可能不需要 Linter 规则或 Typescript 类型定义来运行你的应用，对吧？

更好的是，npm 允许我们在安装时省略 devDependencies！

    npm install --only=prod
Enter fullscreen mode Exit fullscreen mode

附注（但很重要）

卸载库

是不是输入错误，忘记在命令中使用 --save-dev 选项了？
想清理应用中的无用模块？
你有两个选择：要么删除软件包，然后使用正确的命令重新安装；要么在 package.json 中手动操作。

    npm uninstall <your_library>
Enter fullscreen mode Exit fullscreen mode

这将从 package.json和节点模块中删除该库。

如果您想将其从节点模块中删除，但不想从 package.json 中删除（假设安装由于某种原因失败）。

  npm uninstall --no-save <your_library>
Enter fullscreen mode Exit fullscreen mode

如果您不想使用 shell 命令，您也可以手动更新您的 package.json。

让我们回到之前的例子

"dependencies": {
    "express": "^4.17.1"
},
"devDependencies": {
    "eslint": "^7.13.0"
}
Enter fullscreen mode Exit fullscreen mode

要删除 eslint 依赖项，请将其删除，然后重新运行 npm install。

安装特定版本

有时你需要安装某个软件包的特定版本。这很简单：

    npm install <your_library>@<version>
Enter fullscreen mode Exit fullscreen mode

例如 ：

    npm install eslint@1.0.0
Enter fullscreen mode Exit fullscreen mode

package-lock.json

最后但同样重要的是 package-lock。它实际上是为了解决 package.json 中一个我们之前没有讨论过的问题。

我们之前看到，安装新包时，其版本会被设置到 package.json 文件中。它使用了semver 约定。

基本上，每当运行 npm install 命令时，实际版本号之前的第一个字符都会暗示一些细微的变化。

    "express": "~4.17.1"
Enter fullscreen mode Exit fullscreen mode

~表示NPM 将去寻找4.17.1版本，但如果有较新的补丁版本可用，比如说4.17.9，它将使用这个版本。

    "express": "^4.17.1"
Enter fullscreen mode Exit fullscreen mode

^表示NPM 将去寻找4.17.1版本，但如果有较新的次要版本可用，比如说4.18.1，它将使用这个版本。

    "express": "4.17.1"
Enter fullscreen mode Exit fullscreen mode

如果省略一个字符，无论发生什么，NPM 都会始终使用这个精确版本。

如果你总是指定确切的版本，那么我将要解释的以下问题已经消失了

现在假设您已经在一个项目上工作了几年，并且有一个新的贡献者克隆并安装了它。

由于时间已经过去很久，我们的一些依赖项肯定已经发布了一些新版本。正如我们之前解释的那样，NPM 会根据你的 semver 约定来查找潜在的更新版本……

然后我们遇到了问题，你的项目和新安装的项目实际上是不同的，因为某些依赖项与 package.json 中指定的版本不匹配。

Package-lock 来帮忙了。顾名思义，它会锁定版本号，并确保在后续的每次安装中都安装相同的软件包版本。

您可以在Othrys 网站上找到原始文章，也可以关注我的Twitter或在这里标记我来讨论这篇文章。

文章来源：https://dev.to/chandelieraxel/the-npm-guide-i-would-have-loved-as-a-beginner-4i07
Devto 翻译
PREV
React + Firebase + Stripe = Fireact，您的下一个 SaaS 产品的开源项目。
NEXT
Chrome 扩展程序让我的工作更轻松