Dans ce guide NPM, nous avons une compréhension générale du NPM - il représente le gestionnaire de packages de n?uds. Dans le processus, nous discutons de l'importance de la ligne de commande et de son fonctionnement avec NPM.

Nous avons également spécifiquement examiné "N" dans NPM - Node - et avons appris que le n?ud est très similaire au code JavaScript, nous exécutons un site Web dans un navigateur. En fait, le n?ud est javascript;

Chapitre du guide

1. Pour qui est ce guide?
2. Que signifie "NPM"?
3. Quelle est la ligne de commande?
4. Qu'est-ce que le n?ud?
5. Qu'est-ce qu'un gestionnaire de packages? (Tu es maintenant!)
6. Comment installer NPM?
7. Comment installer le package NPM?
8. Qu'est-ce que la commande NPM?
9. Comment installer un projet NPM existant?

Le sens de "bao"

Concentrons-nous maintenant sur les deux dernières lettres de NPM, la section "Package Manager". Pour bien comprendre ce qu'est le NPM, nous devons savoir ce qu'est un gestionnaire de packages. Donc, naturellement, afin de comprendre cela , nous devons comprendre ce qu'est le "package".

" Package " est un terme général pour tout fichier de code externe que vous ajoutez à votre projet et utilisez d'une manière ou d'une autre. Peut-être que vous avez utilisé JQuery, Bootstrap ou Axios dans vos projets dans le passé. Ce sont des exemples courants de packages.

Nous les appelons "packages" car ils sont "emballés" et prêts à l'emploi. Certaines langues les appellent d'autres noms (par exemple, Ruby les appelle "gem"), mais le concept est le même. Pour éviter la simplification excessive, les packages sont du code que vous n'avez pas écrit mais obtenez-vous à partir de certaines sources publiques à utiliser dans votre projet. Vous savez, code tiers.

Ou, si vous préférez l'imitation musicale à l'aide de mnémoniques:

??????

Les packages sont également souvent appelés ?dépendances? car le code que vous écrivez dépend de leur existence. Par exemple, le code écrit avec les $ de jQuery ne fonctionnera pas correctement si jQuery lui-même n'est pas chargé. (Ainsi, les gestionnaires de packages sont parfois appelés "gestionnaires de dépendances".)

La taille du package peut varier en termes de quantité de code incluse. Un package peut effectuer d'énormes opérations, modifiant ainsi la fa?on dont vous écrivez votre projet entier (comme l'ensemble du framework), ou il peut faire de très petites opérations ciblées que vous ajoutez simplement où vous en avez besoin (comme des widgets ou des programmes d'assistance pour une tache spécifique).

Utilisez des packages sans utiliser de gestionnaire de packages

Si vous avez utilisé des packages dans le passé, il est très probable que vous utilisez simplement des balises de script en HTML pour les appliquer aux balises de script extraites des URL externes (idéalement à partir de CDN). Voici comment vous pouvez inclure jQuery dans le HTML de votre site Web:

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

Une autre fa?on consiste à télécharger une copie du package, à l'ajouter au dossier du projet, puis à le lier comme ?a:

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

Problèmes résolus par le gestionnaire de packages

Les deux méthodes ont bien fonctionné au fil des ans. C'est très simple. C'est très propre. En ce qui concerne les packages, il vous permet généralement de "configurer et oublier". Alors pourquoi avez-vous besoin d'autre chose?

Comme vous pouvez l'imaginer, la possession d'une voiture peut ne pas sembler attrayante pour quelqu'un qui peut facilement utiliser les transports en commun ou qui n'ont pas besoin de longs voyages. (Ce sera lié à la discussion du gestionnaire de packages, je le promets. Tenez-vous à lui.)

Si vous êtes pratique d'utiliser des transports publics efficaces, en payant un prix élevé pour une grande machine, vous devez le stocker quelque part, nettoyant régulièrement, entretenant et remplissant le carburant co?teux, ce qui peut ne pas être un avantage de votre point de vue. Dans ce cas particulier, les avantages sont insignifiants; le co?t est relativement écrasant. Les gens dans cette position hypothétique peuvent même se demander pourquoi quelqu'un veut une voiture!

Je propose cette analogie car lorsqu'elle résout les problèmes que vous n'avez pas , il peut être très difficile d'apprendre une nouvelle technologie, qui est très similaire à l'achat d'une voiture qui pourrait ne pas résoudre le transport que vous avez déjà. Cela peut sembler une dépense énorme et inutile.

Ensuite, les problèmes résolus par le gestionnaire de packages concernent davantage les problèmes d'échelle et de traitement. si seulement:

• Le nombre de projets que vous avez est gérable;
• Le nombre de personnes travaillant sur le projet est gérable;
• Le nombre de mises à jour nécessaires à faire pour le package est gérable;
• Chaque package utilisé dans le projet est le client (navigateur) JavaScript ou CSS.

Le dernier est la chose la plus importante, car si vous exécutez uniquement des programmes dans votre navigateur, vous ne pourrez jamais utiliser beaucoup d'outils (plus à ce sujet plus tard).

Si vous cochez toutes ces cases, vous n'allez probablement jamais au-delà de cette méthode. Votre méthode de développement peut ressembler à ceci:

Mais même dans ce cas, quand vous avez plusieurs<script> 標簽時，每個標簽都鏈接到某個腳本或庫的特定版本，那么<em>唯一可以查看您正在使用哪些包以及它們是否是最新的方法是手動打開 HTML 并查看代碼。</script>

這本身并不是什么大問題，但隨著項目規(guī)模和范圍的擴大，這個問題呈指數(shù)級增長。您也許可以手動跟蹤幾個包，但是當我們談?wù)摰氖菙?shù)百個——如果不是數(shù)千個——包時，您怎么可能做到這一點呢？即使您可以手動跟蹤這些包，這仍然會帶來人為錯誤的高風險。

HTML 的工作不是成為項目中所有使用的包的真相來源。 除了混合關(guān)注點外，在嘗試合并團隊成員之間不相關(guān)的作品時，它還可能導致沖突。

所有這些都很重要，但只是更大問題的一小部分。請了解，客戶端 JavaScript 可能不是您永遠想要包含在項目中的唯一類型的包，即使目前是這樣——這就是事情真正開始崩潰的地方。

許多生產(chǎn)應(yīng)用程序使用以下工具和包的某種組合，如果不是全部的話：

• Sass（使編寫 CSS 更容易）
• PostCSS（增強 CSS 以實現(xiàn)最大的效率和兼容性）
• Babel（轉(zhuǎn)換較新的 JavaScript 以在較舊的瀏覽器中運行）
• TypeScript（向 JavaScript 添加類型檢查）
• 由自動刷新瀏覽器以顯示您的更改的開發(fā)服務(wù)器提供的熱模塊重新加載
• 用于代碼捆綁、縮小和/或連接的其他實用程序
• 自動圖像壓縮
• 測試庫
• 代碼檢查器

所有這些聽起來都很棒——而且確實很棒！——但是請注意，您現(xiàn)在有多個依賴項，這些依賴項不僅不存在于您的 <script></script> 標簽中，而且根本沒有在您的項目中任何地方說明！任何人都無法知道——包括您未來的自己——使用了哪些工具或需要哪些工具才能使該項目運行。

即使您可以通過這種方式準確地知道項目需要什么，您仍然需要自己手動找到、下載和安裝所有這些包。根據(jù)項目的情況，這很容易成為一天或更長時間的任務(wù)。

所有這一切都意味著您的工作流程現(xiàn)在看起來更像這樣：

所有上述工具都非常方便，您仍然需要管理它們。 依賴項也是項目，它們發(fā)布更新以修復(fù)錯誤并引入新功能。因此，簡單地在 HTML 中粘貼一個指向 CDN 上包的鏈接的 <script></script> 標簽然后認為它已經(jīng)完成是不現(xiàn)實的。您必須確保每件事不僅在您的機器上安裝并正常工作，而且在每個協(xié)作者的機器上也正常工作。

包管理器存在是為了使項目的包——或依賴項——易于管理，方法是知道安裝了什么、有什么可更新的以及一個包是否可能與另一個包沖突。包管理器的優(yōu)點是它可以直接從命令行完成所有這些操作，并且工作量最少。

許多包管理器，尤其是 npm，還提供其他功能，這些功能可以打開更多可能性，從而使開發(fā)更高效。但是管理包是主要吸引力。

有些包管理器不是 npm

這部分與 npm 本身無關(guān)，但為了完整起見，我還應(yīng)該提到 npm 不是唯一的 JavaScript 包管理器。例如，您可能會在代碼示例中看到 Yarn 的引用。Yarn 和 npm 的工作方式非常相似，它們之間的大量互操作性是特意構(gòu)建的。

有些人更喜歡一個包管理器而不是另一個包管理器。就我個人而言，我認為 npm 和 Yarn 之間的差異最初更為明顯，但現(xiàn)在兩者比以往任何時候都更加相似。

您可能會看到代碼示例（包括 CSS-Tricks 文章中的一些示例），這些示例同時引用 yarn 和 npm。這是為了讓讀者知道這兩種方法都可以，而不是需要同時使用它們。

Yarn 和 npm 的語法有時有所不同，但當只有一個存在時，通?？梢暂p松地將命令或項目從一個轉(zhuǎn)換為另一個。從功能上講，您使用哪一個很少（如果有的話）很重要——當然，除了所有在同一項目上一起工作的人都需要使用相同的包管理器以確保兼容性和一致性之外。

雖然 npm 和 Yarn 構(gòu)成了開發(fā)人員使用的絕大多數(shù)包管理器，但還有一個名為 PnPm 的包管理器實際上是 npm，但性能更高、效率更高。權(quán)衡是 PnPm 在某些情況下需要更多技術(shù)知識，因此它更高級。

使 npm 成為“標準”包管理器的因素

同樣，我只是提出其他包管理器是為了說明 npm 不是唯一存在的包管理器——但它通常是標準的。

是什么使它成為包管理器中的“標準”？包括 Ruby 和 PHP 在內(nèi)的其他語言多年來都有包管理器；在 npm 之前，JavaScript 實際上沒有任何好的包管理器。

npm 最初是一個獨立的開源項目，但在 2020 年被微軟收購。它技術(shù)上包含兩個部分：實際的包管理器本身；以及包注冊表，這是一個不斷增長的列表，其中包含近 200 萬個可供安裝的包。

您可以將 npm 視為您可能想要在前端或基于 Node 的項目中使用的任何東西的應(yīng)用程序商店。找到您想要的東西并通過命令行將其安裝到您的系統(tǒng)。當發(fā)布新版本時，您可能會更新該包，或者如果項目不再依賴它，則完全刪除它。

關(guān)于 npx 的說明

您也可能會看到 npx 命令出現(xiàn)。npx 實際上是 npm 的一部分，但是通過在命令中使用 npx 而不是 npm，您可以執(zhí)行包的代碼，而不會 永久 安裝它。NPX 只安裝它需要的東西，運行它，然后將其刪除。

例如，如果您想運行安裝程序腳本，這將很有用。npx 不需要下載安裝程序，然后運行它，它允許您直接運行安裝程序，之后不會在您的機器上留下任何東西。它就像一個清理自己東西的客人。

另一個很酷的例子：如果您只想編譯項目中的 Sass 文件一次，而不必費心完全安裝 Sass，您可以運行 npx sass（以及必要的輸入和輸出參數(shù)）。在大多數(shù)情況下，這可能不切實際，但如果您只是需要在這里和那里進行快速的一次性編譯，那么 npx 將是一種方便的方法，因為它意味著需要更新和維護的已安裝包更少。

接下來的步驟

好的，這就是我們稱某個東西為包管理器時所指的深入探討。對于 npm 而言，它專門用于安裝和管理 Node 包，這些工具有助于向項目添加功能、添加方便的開發(fā)人員便利性……或所有上述內(nèi)容！

接下來，我們將邁出使用 npm 的第一步。為此，我們需要將其安裝到我們的系統(tǒng)中。這是本 npm 完全指南中的下一步。

← 第 4 章 第 6 章 →

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!