패키지 관리자는 무엇입니까?-CSS 튜토리얼-php.cn

패키지 관리자는 무엇입니까?

이 NPM 안내서에는 NPM에 대한 일반적인 이해가 있습니다. 노드 패키지 관리자를 의미합니다. 그 과정에서 우리는 명령 줄의 중요성과 그것이 NPM에서 어떻게 작동하는지에 대해 논의합니다.

또한 NPM -Node의 "N"을 구체적으로 살펴보고 노드가 브라우저에서 웹 사이트를 실행하는 JavaScript 코드와 매우 유사하다는 것을 알게되었습니다. 실제로 Node는 JavaScript 입니다 . 브라우저 외부에서 실행되며 브라우저 기반과 다른 작업을 수행 할 수 있습니다.

가이드 챕터

이 안내서는 누구입니까?
"NPM"은 무엇을 의미합니까?
명령 줄은 무엇입니까?
노드 란 무엇입니까?
패키지 관리자 란 무엇입니까? (당신은 지금!)
NPM을 설치하는 방법?
NPM 패키지를 설치하는 방법?
NPM 명령은 무엇입니까?
기존 NPM 프로젝트를 설치하는 방법은 무엇입니까?

"bao"의 의미

이제 "패키지 관리자"섹션 인 NPM의 마지막 두 글자에 중점을 두겠습니다. NPM이 무엇인지 완전히 이해하려면 패키지 관리자가 무엇인지 알아야합니다. 따라서 당연히 이해 하려면 "패키지"가 무엇인지 이해해야합니다.

" 패키지 "는 프로젝트에 추가하고 어떤 식 으로든 사용하는 외부 코드 파일의 일반적인 용어입니다. 아마도 과거 프로젝트에서 jQuery, Bootstrap 또는 Axios를 사용했을 수도 있습니다. 이것들은 패키지의 일반적인 예입니다.

우리는 그것들을 "패키지"라고 부릅니다. 왜냐하면 그들은 "패키지"되어 사용할 준비가 되었기 때문입니다. 일부 언어는 다른 이름을 다른 이름이라고 부릅니다 (예 : 루비는 그들을 "보석"이라고 함). 그러나 개념은 동일합니다. 지나치게 단순화를 피하기 위해 패키지는 작성하지 않았지만 프로젝트에서 사용할 공개 소스에서 얻은 코드입니다. 알다시피, 타사 코드.

또는 니모닉을 사용하여 음악적 모방을 선호하는 경우 :

코드 가 아닌가 ?

패키지는 종종 "종속성"이라고도 합니다 . 예를 들어, jQuery 자체가로드되지 않으면 jQuery의 $로 작성된 코드는 제대로 작동하지 않습니다. (따라서 패키지 관리자는 때때로 "종속성 관리자"라고 불립니다.)

패키지의 크기는 포함 된 코드의 양에 따라 다를 수 있습니다. 패키지는 엄청난 작업을 수행 할 수 있으므로 전체 프레임 워크와 같은 전체 프로젝트 작성 방식을 변경하거나 필요한 위치에 추가하는 매우 작고 집중된 작업을 수행 할 수 있습니다 (특정 작업을위한 위젯 또는 도우미 프로그램과 같은).

패키지 관리자를 사용하지 않고 패키지를 사용하십시오

과거에 패키지를 사용한 경우 HTML에서 스크립트 태그를 사용하여 외부 URL에서 추출한 스크립트 태그 (이상적으로 CDN에서)에 적용 할 가능성이 높습니다. 웹 사이트의 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 将是一种方便的方法，因为它意味着需要更新和维护的已安装包更少。