Sada nástrojů pro publikování vaší React Component do Node Package Manager (NPM)

Úvod

Dnes jsme součástí stále rostoucí komunity reakcí po celém světě. Mnoho vývojářů reaguje průběžně a vytváří open-source komponenty reakce a publikuje je do úložiště npm. Celý ekosystém je úžasné místo, kde můžete být vývojářem Reactjs.

V tomto článku vám představím sadu nástrojů, která vám pomůže vytvořit, zabalit, otestovat a publikovat vaši komponentu reakce mnohem rychleji. Jedinou motivací pro vytvoření sady nástrojů bylo to, že vás jako vývojáře pro reakce může povzbudit k tomu, abyste ze své znovupoužitelné komponenty udělali veřejný balíček npm pro ostatní.

Komponenta React jako balíček npm

Předpokládejme, že již víte o vytvoření balíčku npm a publikujete jej, skvělé! Pokud ne, můžete se podívat na tento článek:Vytvořte, otestujte a publikujte své NPM, udělal jsem to za pár minut! Některé kroky zde přesto vysvětlím.

Komponenta respondjs musí projít následujícími kroky, než se stane součástí úložiště npm jako opakovaně použitelný balíček,

  • ✅ Transpilujte kód komponenty reakce do prostého starého JavaScriptu pomocí nástroje, jako je babel. Tento krok vytvoří jeden transpilovaný výstupní soubor, řekněme index.js .
  • ✅ Zkopírujte soubor index.js a všechny další požadované soubory, jako je readme, package.json, .css nebo .sass, soubory obrázků atd., do adresáře, řekněme dist .
  • ✅ V této fázi můžete vytvořit tarball pro místní testování pomocí npm pack příkaz. Tento tarball lze nasměrovat z jakéhokoli jiného projektu reakce jako závislost a otestovat jej.
  • ✅ Pokud jsme připraveni publikovat, musíme se nejprve přihlásit do úložiště npm pomocí npm login . Pokud ještě nemáte přihlašovací údaje, vytvořte si je zde.
  • ✅ Posledním krokem je publikování z dist pomocí npm publish příkaz.

Obrázek vydá za tisíc slov. Zde jsou kroky,

Kroky při publikování komponenty reakce jako npm

Můžete se rozhodnout, že si všechny výše uvedené kroky zapamatujete a budete je provádět znovu a znovu pro publikování vaší pozoruhodné složky reakce. Jinak můžete věci ve skriptu automatizovat tak, že se soustředíte na psaní logiky komponenty. O všechny ostatní provozní části se stará skript.

Seznamte se se sadou nástrojů:reagovat-package-publisher

react-package-publisher poskytuje centralizovaný skript, který se postará o vše potřebné pro publikování do npm. Musíte se ujistit, že jste si vytvořili účet s úložištěm npm jako předpokladem.

  • Rozvětvete nebo klonujte repo-package-publisher.
  • Změňte adresář na react-package-publisher .
  • Upravte package.json s názvem vašeho balíčku, verzí, autorem, licencí, závislostmi, devDependencies atd. Upozorňujeme, že peerDependencies jsou již nastaveny pro konkrétní verzi react a react-dom . Neváhejte změnit verze vhodné pro vaše potřeby. Pokud jste se správou závislostí npm noví, přečtěte si toto.
  • Vytvořte soubor komponenty React a napište kód komponenty.
  • Spusťte build.sh soubor. Ke spuštění build.sh použijte terminál založený na UNIXu (například GitBash). soubor. To je vše.

    Měli byste začít vidět výstup protokolovaný jako ten, který je zobrazen níže. Na konci by měla být vaše komponenta publikována jako balíček do úložiště npm.

    Protokoly při publikování do npm

Pokud najdete nějaké problémy nebo požadavky na vylepšení, přihlaste je zde. Pokud se vám práce líbí, dejte repo hvězdičku 🌟!

Závěr

Tato sada nástrojů není nic jiného než skript, který automatizuje mnoho věcí, které si musíte zapamatovat a spustit. Mám radost z vytváření takových skriptů, které jsou užitečné a mohou ušetřit čas.

Doufám, že jej použijete k publikování vaší super cool komponenty do repozitáře npm. Můžete zcela svobodně přinášet jakékoli změny a vylepšení nástroje nebo se stát spolupracovníky! Uvidíme se tam.

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

Pokud to pro vás bylo užitečné, 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 mého blogu kliknutím na Přihlásit se k odběru tlačítko v horní části stránky.