Příručka závislostí npm pro vás

Úvod

Node Package Manager (npm) je online softwarové úložiště, které pomáhá publikovat a spravovat open-source projekty založené na node.js. Poskytuje také CLI (Command Line Interface) pro instalaci/odinstalaci balíčků, správu verzí a správu závislostí.

Všechny balíčky npm obsahují konkrétní soubor nazvaný package.json . Tento soubor se skládá z několika metadat požadovaných pro balíček. Je to soubor, kde vlastník balíčku popisuje název balíčku, verzi, závislosti, informace o licenci, úložiště kódu atd. Tento soubor poskytuje informace npm, takže úložiště npm může balíček jednoznačně identifikovat a spravovat závislosti.

V tomto článku vysvětlím různé způsoby správy závislostí a jak se od sebe liší.

Ale počkat, co je závislost?

Zřídkakdy vytvoříme aplikaci bez jakékoli závislosti ve světě opětovné použitelnosti a myšlení s otevřeným zdrojovým kódem.

📦 závislosti

dependencies jsou specifikovány jako prostý objekt JSON v souboru package.json. Každá závislost je pár klíč-hodnota, kde klíč je název závislosti a hodnota může být řetězec určující jednu z možností,

  • Verze balíčku
  • Adresa URL Git
  • Adresa URL souboru tarball

V závislosti byste měli zadat pouze balíčky, které jsou nezbytné pro spuštění aplikace objekt. Neměl by obsahovat žádné balíčky používané hlavně pro účely sestavování, překládání a testování.

Zde je příklad závislostí deklarovaných s příslušnými verzemi balíčků,

"dependencies": {
    "moment": "^2.24.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "recharts": "^1.8.5",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  }

Pokud hledáte zadání adresy URL Git pro instalaci balíčku, můžete tak učinit v následujícím formátu

<protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]

A pak zahrnout jako závislost pomocí username/repo#branch-name formát.

Zde je příklad

"dependencies": {
  "cli": "atapas/horoscope-cli#multi-langs"
 }

Možná budete chtít sestavit a otestovat balíček lokálně bez jeho publikování. npm poskytuje obslužný příkaz s názvem npm pack vytvořit tarball pro balíček. Toto umístění tarballu můžete použít jako adresu URL pro určení hodnoty závislosti v jiném projektu.

"dependencies": {
   "react-timeline": "file:react-timeline-0.0.2.tgz"
 }

Všimněte si, že hodnota obsahuje název souboru tarball spolu s file: identifikátor jako prefix.

📦 devDependencies

Když vyvíjíte balíček, možná nebudete chtít, aby si spotřebitelé (uživatelé) balíčku stahovali závislosti související s testem, transpilováním, sestavováním a dokumentem. Jsou interní součástí vašeho balíčku a spotřebitelé je nepotřebují. Například jasmine je testovací závislost a babel je závislost pro transpilaci pokročilého kódu EcmaScript do ES5 pro zpětnou kompatibilitu.

devDependencies je další metaznačka v souboru package.json, která pomáhá rozlišovat dobu vývoje a dobu běhu závislosti. Deklarování závislostí jako devDependencies pomáhá v následujících,

  • Rozlišujte balíčky (nebo knihovny), které chcete sbalit jako nezbytnou závislost, a co potřebujete pro svůj vývoj, testování, sestavování.
  • Pokud se vaše organizace řídí praxí registrace licencí použitých balíčků, uděláte to pouze pro dependencies , nikoli pro devDependencies .
  • Nestahujte nepotřebné balíčky. Cokoli je deklarováno v devDependencies, nebude staženo, pokud zadáte --production příznak s npm install příkaz.

Příklad devDependencies deklarace v souboru package.json.

"devDependencies": {
    "@babel/cli": "7.10.1",
    "@babel/core": "7.8.7",
    "@babel/plugin-proposal-class-properties": "7.8.3",
    "@babel/preset-react": "7.10.1",
    "babel-preset-es2015": "6.24.1",
    "jasmine": "2.0.0"
  }

📦 peerDependencies

Předpokládejme, že vyvíjíte komponentu Reag a chcete ji zpřístupnit jako balíček npm. Chcete zkontrolovat kompatibilitu pro react a react-dom verze balíčků mezi vaším balíčkem a spotřebitelovou aplikací.

Jak to děláš? Jak se ujistíte, že vyjádříte kompatibilitu verzí Reagovat a Reagovat Dom, řekněme 16.12.0?

Tehdy potřebujete peerDependencies . PeerDependencies můžete deklarovat jako další metainformace v souboru package.json jako,

"peerDependencies": {
    "react": "16.12.0",
    "react-dom": "16.12.0"
  },

V případě nekompatibility vyhodí varování, že peerDependency není nainstalován. Toto varování je skvělý způsob, jak zachránit vývojáře, aby se nedostali do situace zvané peklo závislosti.

📦 bundledDependencies

Pomáhá při sdružování jednoho nebo více balíčků v rámci vašeho balíčku. bundledDependencies pomáhá definovat pole balíčků, které chcete sbalit přímo při sestavování balíčku.

Zde je příklad, kde váš balíček my-great-package sbalí dva další balíčky, your-package a her-package .

{
  "name": "my-great-package",
  "version": "1.0.0",
  "bundledDependencies": [
    "your-package", "her-package"
  ]
}

Můžete jej použít hlavně pro tyto účely:

  • Máte soukromý balíček npm, který není dostupný v registru npm, a chcete jej spojit s jiným balíčkem.
  • Chcete sbalit a distribuovat některé soubory (dokumenty) spolu s balíčkem.

📦 optionalDependencies

Jak název napovídá, jedná se o volitelné závislosti. Pokud se tyto závislosti nepodaří nainstalovat, npm nebo yarn bude stále hlásit, že proces instalace byl úspěšný.

Mohou existovat závislosti, které nemusí nutně fungovat v každém prostředí, a pokud nejsou nainstalovány, chcete záložní mechanismus. Takto můžete definovat optionalDependencies v souboru package.json.

"optionalDependencies": {
    "package-X": "^5.1.0"
  }

Závěr

Na závěr chci zmínit, že možná nepoužíváte všechny metody správy závislostí, které jsme zde viděli, ale musíte je znát. Znalost mechanismů správy závislostí vám pomůže velmi dobře zorganizovat vaše projektové závislosti.

Viděl jsem několik chyb, které udělali vývojáři, jako je

  • Míchání dependencies a devDependencies spolu. Může to vést k problémům, jako je stahování nepotřebných souborů.
  • V režimu produkčního sestavení se nespoléhá na --production vlajka.

Doufám, že vám tento článek poskytne základní pochopení několika způsobů správy závislostí dostupných v ekosystému npm. Další podrobnosti naleznete zde.

Titulní obrázek je improvizací vytvořenou nad návrhem od Freepik.

Pokud vám to pomohlo, dejte like/sdílejte, aby se to dostalo i k ostatním. Chcete-li dostávat e-mailová upozornění na mé nejnovější příspěvky, přihlaste se k odběru na můj blog kliknutím na tlačítko Odebírat v horní části stránky.