パッケージマネージャーとは何ですか？-CSSチュートリアル-php.cn

パッケージマネージャーとは何ですか？

このNPMガイドでは、NPMを一般的に理解しています。ノードパッケージマネージャーの略です。その過程で、コマンドラインの重要性と、NPMでどのように機能するかについて説明します。

また、npm -nodeの「n」を特に調べ、ノードがブラウザでウェブサイトを実行するJavaScriptコードに非常に似ていることを知りました。実際、ノードはJavaScriptです。ブラウザベースのカウンターパートとは異なる操作を実行できます。

章をガイドします

このガイドは誰ですか？
「NPM」とはどういう意味ですか？
コマンドラインとは何ですか？
ノードとは何ですか？
パッケージマネージャーとは何ですか？ （あなたは今です！）
NPMをインストールする方法は？
NPMパッケージをインストールする方法は？
NPMコマンドとは何ですか？
既存のNPMプロジェクトをインストールする方法は？

「バオ」の意味

次に、NPMの最後の2文字である「パッケージマネージャー」セクションに焦点を当てましょう。 NPMとは何かを完全に理解するには、パッケージマネージャーが何であるかを知る必要があります。したがって、当然のことながら、それを理解するためには、「パッケージ」が何であるかを理解する必要があります。

「パッケージ」は、プロジェクトに追加し、何らかの方法で使用する外部コードファイルの一般的な用語です。過去にプロジェクトでjQuery、Bootstrap、またはAxiosを使用したことがあるかもしれません。これらは、パッケージの一般的な例です。

それらは「パッケージ」であり、使用できるため、それらを「パッケージ」と呼びます。一部の言語では、他の名前を呼び出します（たとえば、Rubyはそれらを「宝石」と呼びます）が、概念は同じです。単純化を回避するために、パッケージはあなたが書いていないが、プロジェクトで使用するためにいくつかの公開ソースから得たコードです。サードパーティのコード。

または、ニーモニックを使用して音楽の模倣を好む場合は：

あなたはあなたのものではありませんか？

パッケージは、書くコードはその存在に依存するため、「依存関係」とも呼ばれます。たとえば、jQueryの$で記述されたコードは、jQuery自体がロードされていない場合、適切に機能しません。（したがって、パッケージマネージャーは「依存関係マネージャー」と呼ばれることもあります。）

パッケージのサイズは、含まれるコードの量によって異なる場合があります。パッケージはいくつかの巨大な操作を行うことができるため、プロジェクト全体（フレームワーク全体など）の作成方法を変更したり、必要な場所に追加する非常に小さく焦点を絞った操作を行うことができます（特定のタスクのためのウィジェットやヘルパープログラムなど）。

パッケージマネージャーを使用せずにパッケージを使用します

過去にパッケージを使用していた場合、HTMLのスクリプトタグを使用して、外部URL（理想的にはCDNから）から抽出されたスクリプトタグに適用するだけです。 WebサイトのHTMLにjqueryを含める方法は次のとおりです。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

ログイン後にコピー

別の方法は、パッケージのコピーをダウンロードし、プロジェクトのフォルダーに追加してから、次のようにリンクすることです。

<script src="./js/jquery-3.6.0.min.js"></script>

ログイン後にコピー

パッケージマネージャーが解決した問題

どちらの方法も長年にわたってうまく機能してきました。とても簡単です。とてもきれいです。パッケージに関する限り、通常は「セットアップと忘れ」が可能になります。それで、なぜあなたは何か他のものが必要なのですか？

ご想像のとおり、車を所有することは、公共交通機関を簡単に使用できる人や長い旅行を必要としない人にとって魅力的ではないように思えるかもしれません。（これはパッケージマネージャーのディスカッションに関連しています、私は約束します。それに固執します。）

効率的な公共交通機関を使用し、大規模なマシンに高い価格を支払うのに便利な場合は、どこかに保管し、定期的に掃除、維持、埋め尽くして、あなたの観点からはあまり利益ではないかもしれません。この特定のケースでは、利点は取るに足らないものです。この仮説的な立場にいる人々は、なぜ誰もが車を望んでいるのか疑問に思うかもしれません！

私はこの類推を提案します。なぜなら、それがあなたが持っていない問題を解決したとき、あなたがすでに持っている輸送を解決しないかもしれない車を買うことに非常に似ている新しいテクノロジーを学ぶことは非常に難しいかもしれないからです。それは巨大で不必要な費用のように思えるかもしれません。

次に、パッケージマネージャーによって解決された問題は、スケールと処理の問題に関するものです。のみ：

あなたが持っているプロジェクトの数は管理可能です。
プロジェクトに取り組んでいる人の数は管理可能です。
パッケージに必要な更新の数は管理可能です。
プロジェクトで使用される各パッケージは、クライアント（ブラウザ）JavaScriptまたはCSSです。

最後のものは最も重要なことです。ブラウザでプログラムのみを実行する場合、多くのツールを使用することはできないためです（詳細については後で詳しく説明します）。

これらのチェックボックスをすべてチェックする場合、おそらくこの方法を超えることはありません。あなたの開発方法は次のようになるかもしれません：

しかし、この場合でも、複数の場合でも<script> 标签时，每个标签都链接到某个脚本或库的特定版本，那么<em>唯一可以查看您正在使用哪些包以及它们是否是最新的方法是手动打开 HTML 并查看代码。</script>

这本身并不是什么大问题，但随着项目规模和范围的扩大，这个问题呈指数级增长。您也许可以手动跟踪几个包，但是当我们谈论的是数百个——如果不是数千个——包时，您怎么可能做到这一点呢？即使您可以手动跟踪这些包，这仍然会带来人为错误的高风险。

HTML 的工作不是成为项目中所有使用的包的真相来源。 除了混合关注点外，在尝试合并团队成员之间不相关的作品时，它还可能导致冲突。

所有这些都很重要，但只是更大问题的一小部分。请了解，客户端 JavaScript 可能不是您永远想要包含在项目中的唯一类型的包，即使目前是这样——这就是事情真正开始崩溃的地方。

许多生产应用程序使用以下工具和包的某种组合，如果不是全部的话：

Sass（使编写 CSS 更容易）
PostCSS（增强 CSS 以实现最大的效率和兼容性）
Babel（转换较新的 JavaScript 以在较旧的浏览器中运行）
TypeScript（向 JavaScript 添加类型检查）
由自动刷新浏览器以显示您的更改的开发服务器提供的热模块重新加载
用于代码捆绑、缩小和/或连接的其他实用程序
自动图像压缩
测试库
代码检查器

所有这些听起来都很棒——而且确实很棒！——但是请注意，您现在有多个依赖项，这些依赖项不仅不存在于您的 <script></script> 标签中，而且根本没有在您的项目中任何地方说明！任何人都无法知道——包括您未来的自己——使用了哪些工具或需要哪些工具才能使该项目运行。

即使您可以通过这种方式准确地知道项目需要什么，您仍然需要自己手动找到、下载和安装所有这些包。根据项目的情况，这很容易成为一天或更长时间的任务。

所有这一切都意味着您的工作流程现在看起来更像这样：

所有上述工具都非常方便，您仍然需要管理它们。 依赖项也是项目，它们发布更新以修复错误并引入新功能。因此，简单地在 HTML 中粘贴一个指向 CDN 上包的链接的 <script></script> 标签然后认为它已经完成是不现实的。您必须确保每件事不仅在您的机器上安装并正常工作，而且在每个协作者的机器上也正常工作。

包管理器存在是为了使项目的包——或依赖项——易于管理，方法是知道安装了什么、有什么可更新的以及一个包是否可能与另一个包冲突。包管理器的优点是它可以直接从命令行完成所有这些操作，并且工作量最少。

许多包管理器，尤其是 npm，还提供其他功能，这些功能可以打开更多可能性，从而使开发更高效。但是管理包是主要吸引力。

有些包管理器不是 npm

这部分与 npm 本身无关，但为了完整起见，我还应该提到 npm 不是唯一的 JavaScript 包管理器。例如，您可能会在代码示例中看到 Yarn 的引用。Yarn 和 npm 的工作方式非常相似，它们之间的大量互操作性是特意构建的。

有些人更喜欢一个包管理器而不是另一个包管理器。就我个人而言，我认为 npm 和 Yarn 之间的差异最初更为明显，但现在两者比以往任何时候都更加相似。

您可能会看到代码示例（包括 CSS-Tricks 文章中的一些示例），这些示例同时引用 yarn 和 npm。这是为了让读者知道这两种方法都可以，而不是需要同时使用它们。

Yarn 和 npm 的语法有时有所不同，但当只有一个存在时，通常可以轻松地将命令或项目从一个转换为另一个。从功能上讲，您使用哪一个很少（如果有的话）很重要——当然，除了所有在同一项目上一起工作的人都需要使用相同的包管理器以确保兼容性和一致性之外。

虽然 npm 和 Yarn 构成了开发人员使用的绝大多数包管理器，但还有一个名为 PnPm 的包管理器实际上是 npm，但性能更高、效率更高。权衡是 PnPm 在某些情况下需要更多技术知识，因此它更高级。

使 npm 成为“标准”包管理器的因素

同样，我只是提出其他包管理器是为了说明 npm 不是唯一存在的包管理器——但它通常是标准的。

是什么使它成为包管理器中的“标准”？包括 Ruby 和 PHP 在内的其他语言多年来都有包管理器；在 npm 之前，JavaScript 实际上没有任何好的包管理器。

npm 最初是一个独立的开源项目，但在 2020 年被微软收购。它技术上包含两个部分：实际的包管理器本身；以及包注册表，这是一个不断增长的列表，其中包含近 200 万个可供安装的包。

您可以将 npm 视为您可能想要在前端或基于 Node 的项目中使用的任何东西的应用程序商店。找到您想要的东西并通过命令行将其安装到您的系统。当发布新版本时，您可能会更新该包，或者如果项目不再依赖它，则完全删除它。

关于 npx 的说明

您也可能会看到 npx 命令出现。npx 实际上是 npm 的一部分，但是通过在命令中使用 npx 而不是 npm，您可以执行包的代码，而不会永久安装它。NPX 只安装它需要的东西，运行它，然后将其删除。

例如，如果您想运行安装程序脚本，这将很有用。npx 不需要下载安装程序，然后运行它，它允许您直接运行安装程序，之后不会在您的机器上留下任何东西。它就像一个清理自己东西的客人。

另一个很酷的例子：如果您只想编译项目中的 Sass 文件一次，而不必费心完全安装 Sass，您可以运行 npx sass（以及必要的输入和输出参数）。在大多数情况下，这可能不切实际，但如果您只是需要在这里和那里进行快速的一次性编译，那么 npx 将是一种方便的方法，因为它意味着需要更新和维护的已安装包更少。