Ú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í verzireact
areact-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.