{"id":231654,"date":"2023-01-12T14:12:00","date_gmt":"2023-01-12T11:12:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231654"},"modified":"2023-01-12T14:13:46","modified_gmt":"2023-01-12T11:13:46","slug":"jak-prawidlowo-stworzyc-i-opublikowac-narzedzie-deno-cli","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/jak-prawidlowo-stworzyc-i-opublikowac-narzedzie-deno-cli\/","title":{"rendered":"Jak prawid\u0142owo stworzy\u0107 i opublikowa\u0107 narz\u0119dzie Deno CLI"},"content":{"rendered":"\n

Jedn\u0105 fajn\u0105 rzecz\u0105 w frameworku Ember jest to, \u017ce ma on CLI Ember do generowania komponentu, szablonu lub trasy. To du\u017ca oszcz\u0119dno\u015b\u0107 czasu, a co wi\u0119cej, ember generate component<\/code>generuje nie tylko komponent, ale tak\u017ce plik testowy dla QUnit. Zobaczmy, jak stworzy\u0107 narz\u0119dzie Deno CLI, aby zrobi\u0107 co\u015b podobnego dla Reacta.<\/p>\n

W tym samouczku Deno zobaczymy, jak utworzy\u0107 narz\u0119dzie Deno CLI za pomoc\u0105 TypeScript, jak za\u0142adowa\u0107 zale\u017cno\u015bci ze standardowej biblioteki Deno. Dowiemy si\u0119, jak czyta\u0107 katalog i zapisywa\u0107 plik. Na koniec nauczymy si\u0119 publikowa\u0107 nasz modu\u0142 Deno na GitHub i uruchamia\u0107 go bezpo\u015brednio z tej lokalizacji, a tak\u017ce instalowa\u0107 go lokalnie, aby m\u00f3g\u0142 dzia\u0142a\u0107 bez po\u0142\u0105czenia.<\/p>\n

Przegl\u0105d<\/h2>\n

Narz\u0119dzie CLI, kt\u00f3re zbudujemy w tym samouczku Deno, zaakceptuje nazw\u0119 komponentu przekazan\u0105 w wierszu polece\u0144 i wygeneruje katalog oraz plik z kodem komponentu funkcjonalnego React.<\/p>\n

Stworzy\u0142em pe\u0142niejsz\u0105 wersj\u0119 tego, kt\u00f3ra tworzy r\u00f3wnie\u017c arkusz styl\u00f3w SASS i plik testowy odpowiedni dla Jest i Enzyme. Wkr\u00f3tce dodamy wi\u0119cej szablon\u00f3w dostosowywania i komponent\u00f3w (takich jak te korzystaj\u0105ce z hook\u00f3w, Redux, Routera lub wszystkich z nich).<\/p>\n

Jednak dla uproszczenia ten samouczek Deno om\u00f3wi podstawowe informacje: odczytywanie parametr\u00f3w i zapisywanie plik\u00f3w, a my napiszemy jeden plik. Reszta to manipulacja ci\u0105gami znak\u00f3w i wi\u0119cej pisania tre\u015bci, nic szczeg\u00f3lnego. Mo\u017cesz uzyska\u0107 dost\u0119p do pe\u0142nego narz\u0119dzia Deno CLI, aby wygenerowa\u0107 komponent React z SASS i Jest w repozytorium na ko\u0144cu tego artyku\u0142u.<\/p>\n

Zainstaluj Deno<\/h2>\n

Aby uruchomi\u0107 to narz\u0119dzie Deno CLI, musisz mie\u0107 zainstalowane \u015brodowisko wykonawcze. Je\u015bli korzystasz ju\u017c z Homebrew na macOS, mo\u017cesz szybko zainstalowa\u0107 Deno za pomoc\u0105:<\/p>\n

brew install deno<\/code><\/pre>\n
Je\u015bli nie u\u017cywasz Homebrew, mo\u017cesz zainstalowa\u0107 go za pomoc\u0105 CURL:<\/p>\n
curl -fsSL https:\/\/deno.land\/x\/install\/install.sh | sh<\/code><\/pre>\n
Inne metody i systemy instalacji s\u0105 opisane w Instrukcji Deno<\/a>.<\/p>\n
Przeczytaj parametry wiersza polece\u0144 w Deno<\/h2>\n
Najwa\u017cniejsz\u0105 rzecz\u0105, jakiej potrzebujemy dla naszego generatora, jest przyj\u0119cie nazwy komponentu. Musimy mie\u0107 mo\u017cliwo\u015b\u0107 przekazania nazwy komponentu do narz\u0119dzia Deno<\/a>. Utw\u00f3rz katalog i dodaj plik o nazwie mod.ts<\/code>i wklej do niego:<\/p>\n
const { args: [name] } = Deno;\nconsole.log( `Writing component ${ name }` );<\/code><\/pre>\n
Teraz, gdy dodasz Deno<\/code>zmienn\u0105, prawdopodobnie otrzymasz ostrze\u017cenie, w zale\u017cno\u015bci od edytora kodu i jego obs\u0142ugi TypeScript, m\u00f3wi\u0105ce, \u017ce nie mo\u017ce znale\u017a\u0107 Deno<\/code>nazwy. Je\u015bli korzystasz z VS Code, mo\u017cesz rozwi\u0105za\u0107 ten problem, korzystaj\u0105c z oficjalnego rozszerzenia VS Code, aby doda\u0107 obs\u0142ug\u0119 Deno<\/a>. JetBrains opublikowa\u0142 r\u00f3wnie\u017c wtyczk\u0119 zapewniaj\u0105c\u0105 obs\u0142ug\u0119 Deno dla IDE JetBrain<\/a>.<\/p>\n
Teraz uruchom ten modu\u0142 z:<\/p>\n
deno run mod.ts<\/code>Witaj \u015bwiecie<\/p>\n
To odpowie parametrem \u201eHelloWorld", kt\u00f3ry przekazali\u015bmy:<\/p>\n
Writing component HelloWorld<\/code><\/p>\n
Mi\u0142y! To dzia\u0142a!<\/p>\n
Zapisuj pliki za pomoc\u0105 Deno<\/h2>\n
Zapiszmy teraz plik. Najpierw potrzebujemy do tego tre\u015bci, wi\u0119c dodaj to do mod.ts<\/code>pliku. U\u017cyjemy litera\u0142\u00f3w szablonu JavaScript<\/a>, aby utworzy\u0107 pojedynczy ci\u0105g i wstawi\u0107 nazw\u0119 komponentu, a nawet wywo\u0142amy metod\u0119 ci\u0105gu, aby zmieni\u0107 go na ma\u0142e:<\/p>\n
const compoContent: string = `import React from 'react';\nimport PropTypes from 'prop-types';\n\n${name}.propTypes = {\n\n};\nfunction ${name}(props) {\n    return();\n}\nexport default ${name};\n`;<\/code><\/pre>\n
Aby zapisa\u0107 to do pliku, najpierw musimy sprawdzi\u0107, czy katalog istnieje. Wykorzystamy do tego ensureDir<\/code>funkcj\u0119, cz\u0119\u015b\u0107 standardowej biblioteki Deno<\/a>. Utworzy katalog lub katalogi, je\u015bli nie istniej\u0105. Aby powiedzie\u0107 Deno, aby u\u017cywa\u0142 tej zale\u017cno\u015bci, po prostu dodaj to na g\u00f3rze pliku:<\/p>\n
import { ensureDir } from \"https:\/\/deno.land\/std\/fs\/ensure_dir.ts\";<\/code><\/pre>\n
Kiedy uruchomimy nasze narz\u0119dzie, Deno pobierze ten modu\u0142, aby z niego korzysta\u0107. W ko\u0144cu nadszed\u0142 czas, aby zapisa\u0107 plik za writeTestFile<\/code>pomoc\u0105 polecenia w \u015brodowisku wykonawczym Deno. Wklej nast\u0119puj\u0105ce informacje na ko\u0144cu pliku:<\/p>\n
const compoPath: string = \".\/app\/components\/\" + compoName + \"\/\";\n\nensureDir(compoPath)\n  .then(() => {\n    Deno.writeTextFile(compoPath + \"index.js\", compoContent);\n    console.info(\"Done!\");\n});<\/code><\/pre>\n
Test lokalny<\/h2>\n
Sko\u0144czyli\u015bmy kodowanie naszego narz\u0119dzia Deno CLI i mo\u017cemy je teraz przetestowa\u0107. Deno jest zbudowany jako bezpieczne \u015brodowisko uruchomieniowe, wi\u0119c operacje takie jak odczytywanie systemu plik\u00f3w lub zapisywanie do niego s\u0105 domy\u015blnie zabronione. Musisz wyra\u017anie poprosi\u0107 Deno o zezwolenie na dost\u0119p do systemu plik\u00f3w. Jest rozdzielony na dost\u0119p do odczytu i dost\u0119p do zapisu. W tym przypadku potrzebujemy uprawnienia ensureDir<\/code>do odczytu, poniewa\u017c najpierw musimy odczyta\u0107 katalog i sprawdzi\u0107, czy istnieje. Je\u015bli nie, utworzy go, a nast\u0119pnie utworzymy plik. W przypadku dw\u00f3ch ostatnich zada\u0144 potrzebujemy uprawnie\u0144 do zapisu. Wi\u0119c tak mo\u017cesz to uruchomi\u0107:<\/p>\n
deno --allow-read --allow-write mod.ts button<\/code><\/p>\n
I b\u0119dziesz mia\u0142 katalogi utworzone wraz z plikiem, wszystkie wzgl\u0119dem folderu, w kt\u00f3rym to wykonujesz, na przyk\u0142ad app\/components\/Button\/index.js<\/code>.<\/p>\n
Opublikuj modu\u0142 Deno<\/h2>\n
Dystrybucja modu\u0142u Deno jest prosta. Om\u00f3wili\u015bmy to szczeg\u00f3\u0142owo w poprzednim po\u015bcie dotycz\u0105cym tworzenia i publikowania modu\u0142u Deno w serwisie GitHub<\/a>. Musisz zainicjowa\u0107 lokalne repozytorium git:<\/p>\n
git init<\/code><\/p>\n
dodaj i zatwierd\u017a swoje pliki:<\/p>\n
git add .<\/code>
\ngit commit -m \"Initial commit\"<\/code><\/p>\n
utw\u00f3rz repozytorium na GitHub lub podobnej us\u0142udze i wypchnij je. Na przyk\u0142ad, je\u015bli utworzysz repozytorium o nazwie a-deno-module<\/code>na GitHub, mo\u017cesz uruchomi\u0107 to lokalnie, aby przes\u0142a\u0107 je online:<\/p>\n
git remote add origin git@github.com:YOUR-GITHUB-USER\/a-deno-module.git<br>git push -u origin master<\/code><\/p>\n
Skorzystaj z modu\u0142u opublikowanego online<\/h2>\n
Deno mo\u017ce uruchamia\u0107 modu\u0142y bezpo\u015brednio z Internetu i automatycznie instalowa\u0107 swoje zale\u017cno\u015bci. Teraz, gdy jest wdro\u017cone, mo\u017cesz uruchomi\u0107 nasze narz\u0119dzie Deno CLI bezpo\u015brednio z GitHub:<\/p>\n
deno run --allow-read --allow-write https:\/\/raw.githubusercontent.com\/YOUR-GITHUB-USER\/a-deno-module\/master\/mod.ts button<\/code><\/pre>\n
Deno pobierze narz\u0119dzie, sprawdzi zale\u017cno\u015bci i zainstaluje je w razie potrzeby. Wynik b\u0119dzie taki sam jak powy\u017cej, utworzy katalogi i plik.<\/p>\n
Aby unikn\u0105\u0107 konieczno\u015bci pisania tego wszystkiego (lub szukania tego w pow\u0142oce), Deno pozwala zainstalowa\u0107 to narz\u0119dzie, aby dzia\u0142a\u0142o w trybie offline:<\/p>\n
deno install --allow-read --allow-write --name denomodu https:\/\/raw.githubusercontent.com\/YOUR-GITHUB-USER\/a-deno-module\/master\/mod.ts<\/code><\/pre>\n
Narz\u0119dzie otrzyma nazw\u0119 denomodu<\/code>. To, co to robi, polega na utworzeniu pliku wykonywalnego z wierszem polece\u0144 w okre\u015blonym katalogu, na przyk\u0142ad \/Users\/%your-username%\/.deno\/bin<\/code>w macOS. Jego tre\u015bci\u0105 jest polecenie uruchomienia narz\u0119dzia i zaakceptowania parametr\u00f3w:<\/p>\n
#!\/bin\/sh\n\ndeno \"run\" \"--allow-read\" \"--allow-write\" \"https:\/\/raw.githubusercontent.com\/eliorivero\/react-generate-component\/master\/mod.ts\" \"$@\"<\/code><\/pre>\n
Tak wi\u0119c po zako\u0144czeniu procesu, je\u015bli nie doda\u0142e\u015b .\/deno\/bin<\/code>\u015bcie\u017cki do zmiennej \u015brodowiskowej PATH, Deno wy\u015bwietli monit, aby to zrobi\u0107, aby mo\u017cna by\u0142o uruchomi\u0107 narz\u0119dzie.<\/p>\n
Po dodaniu \u015bcie\u017cki do zmiennej PATH mo\u017cesz teraz wywo\u0142a\u0107 narz\u0119dzie:<\/p>\n
denomodu button<\/code><\/p>\n
Jest znacznie kr\u00f3tszy, a teraz dzia\u0142a bez po\u0142\u0105czenia z Internetem. Gratulacje! Utworzy\u0142e\u015b narz\u0119dzie Deno CLI, opublikowa\u0142e\u015b je i zainstalowa\u0142e\u015b lokalnie.<\/p>\n
Narz\u0119dzie Deno CLI do generowania komponentu React<\/h2>\n
Jak wspomniano na pocz\u0105tku tego samouczka Deno, stworzy\u0142em pe\u0142niejsz\u0105 wersj\u0119 tego i mo\u017cesz uzyska\u0107 dost\u0119p do repozytorium tego narz\u0119dzia tutaj:<\/p>\n
https:\/\/github.com\/eliorivero\/react-generate-component<\/a><\/p>\n
To tylko jeden modu\u0142 Deno utworzony na TypeScript i tworzy te pliki:<\/p>\n