Sytuacja kobiet w IT w 2024 roku
9.10.20194 min
Matthew Croak

Matthew CroakUI Software Engineerat Analytic Partners

Jak tworzyć własne skrypty i uruchamiać je przez npm run

Sprawdź, jak krok po kroku stworzyć skrypt powłoki w node.js i używać go przez npm run.

Jak tworzyć własne skrypty i uruchamiać je przez npm run

Skrypty powłoki są bardzo przydatne podczas pracy z aplikacjami JavaScript. Jeśli kiedykolwiek używałeś create-react-app, to wiesz, że skrypt ten zmniejsza ilość pracy związanej z tworzeniem aplikacji React.

Możesz samodzielnie zmniejszyć ilość swojej pracy, niezbędnej do tworzenia skryptów, których możesz użyć do uruchomienia lub kompilacji aplikacji, takich jak npm start lub npm run build. To świetne przykłady poleceń wykonujących określone skrypty powłoki.

Po zapoznaniu się z tym artykułem, będziesz potrafił samodzielnie napisać skrypt od zera w Node.js.

Skrypt, który zamierzamy napisać, jest naprawdę prosty. Wykonując polecenie npm run emoji, skrypt uruchomi się i wypisze, dzięki console.log, losową emoji w terminalu.

Na początek potrzebujemy pliku, który będzie zawierał kod wykonujący skrypt. Nazwijmy go emoji.js. Po utworzeniu pliku możemy rozpocząć pisanie samego skryptu.

Jeśli kiedykolwiek przeglądałeś plik package.json (jako programista JavaScript koniecznie zapoznaj się z tym plikiem, jeśli jeszcze tego nie zrobiłeś!), prawdopodobnie widziałeś sekcję dotyczącą skryptów.

Wskazuje na to klucz, zapisany jako ciąg „scripts”, odnoszący się do wartości, która jest obiektem. Obiekt ten zawiera różne skrypty użyte w konkretnym projekcie (np. npm start).

Oto przykład pary klucz-wartość w sekcji scripts w pliku package.json, po użyciu create-react-app:

"scripts":{
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}


W tym obiekcie będzie się znajdował nasz nowy skrypt. Do pliku package.json dopisz następujący wiersz w obiekcie scripts:

"emoji": "node emoji.js" 


Teraz sekcja Twoich skryptów powinna wyglądać mniej więcej tak:

"scripts":{
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"emoji": "node emoji.js"
}


Wartości w obiekcie scripts zostaną wykonane, gdy użytkownik odwoła się do nich po zdefiniowanym kluczu. Kiedy więc wywołujemy polecenie npm run emoji, wykonuje ono polecenie node emoji.js.

W Node, wpisanie node + nazwa_pliku.js, spowoduje uruchomienie tego pliku JS w wierszu polecenia. Jak już wspomniałem, sposób, w jaki możemy uruchomić skrypt, to wpisanie npm run emoji. Ale zanim będziemy mogli to zrobić, zainstalujmy nasze zależności.

Dodaj następujące linie kodu w wierszu polecenia, aby zainstalować zależności:

npm install node-emoji

npm install random-emoji


Będziemy używać dwóch zależności: node-emoji i random-emoji. Node-emoji to pakiet npm, który obsługuje emoji w projektach Node.js.

Node-emoji ma funkcję get, która akceptuje ciąg znaków. Ten ciąg jest skróconą nazwą emoji. Jeśli chcesz uzyskać emoji serca, napisz:

var emoji = require('node-emoji');

console.log(emoji.get('heart'));


Oto wynik w naszym terminalu:

C:\project-directory> npm run emoji

❤️


Możesz również napisać to w ten sposób:

var emoji = require('node-emoji');

console.log(emoji.get(':heart:'));


Ten format jest tradycyjną reprezentacją emotikonów w markdownie emotikonów, obsługiwanym w wielu miejscach, takich jak GitHub. Przyda się to w naszej następnej zależności - random-emoji.

Random-emoji zwraca ciąg znaków w markdownie, w tym dwukropek początkowy i końcowy. Funkcja random-emoji, której użyjemy do zwrócenia tego ciągu krótkiego kodu, jest po prostu losowa.

Jeśli chcesz zwrócić losową nazwę emoji, napisz:

var emoji = require('emoji-random');

console.log(emoji.random());

Oto, co zostałoby zwrócone:

C:\project-directory> npm run emoji

:squirrel:


Możemy połączyć te zależności i powiązane z nimi funkcje, aby stworzyć nasz unikalny skrypt, który wypisze losowe emoji, zapisywane jako same emoji, a nie tylko jego nazwę otoczoną dwukropkami.

Aby to zrobić, musisz najpierw wywołać losową funkcję random-emoji. Gdy otrzymasz shortcode emoticonu, możesz przekazać ten ciąg do funkcji get w node-emoji. Spowoduje to zwrócenie samego emotikonu.

Aby zobaczyć końcowy wynik z emoji w swoim terminalu, po prostu wywołaj wynik console.log. Oto kod, który napisałem, z pewnym formatowaniem w ostatnim wierszu, aby wskazać krótki kod emoji (minus dwukropki), a także sam emotikon.

var randEmoji = require('emoji-random'),
emoji = require('node-emoji');

var randString = randEmoji.random();

var finalEmoji = emoji.get(randString);

console.log('Here is the '+ randString.split(':')[1] + 'emoji: '+ finalEmoji);


Oto zarejestrowany wynik:

C:\project-directory> npm run emoji

Here is the video_game emoji: ?


Teraz, mimo że nadal możesz uruchomić ten skrypt w dowolnym momencie, wpisując polecenie npm run emoji, możesz pójść dalej, wywołując ten skrypt również razem z innymi skryptami.

Załóżmy, że mamy aplikację React i chcemy generować losowe emoji w naszym terminalu za każdym razem, gdy uruchomimy naszą aplikację (bardziej dla zabawy, niż użytkowo). Możemy wywoływać nasz nowy skrypt emoji w skrypcie startowym.

Oto linia kodu, którą musisz wywołać w węźle emoji.js przy każdym uruchomieniu aplikacji:

"start": "react-scripts start & npm run emoji"


Łącząc nasz skrypt startowy i emoji, możemy wykonać skrypt emoji za każdym razem, gdy uruchamiamy npm start. Bez konieczności używania npm run emoji lub node emoji.js w naszym wierszu poleceń.

Końcowa sekcja skryptów w package.json powinna wyglądać mniej więcej tak:

"scripts": {
"start": "react-scripts start & npm run emoji",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"emoji": "node emoji.js"
}

Podsumowanie

Uwzględniając to w pliku package.json, za każdym razem, gdy uruchomisz aplikację, wygenerujesz również losowe emoji. Chociaż nie jest to najbardziej przydatny skrypt, mam nadzieję, że dzięki tym instrukcjom lepiej rozumiesz skrypty i sposób ich implementacji.


Oryginał tekstu w języku angielskim przeczytasz tutaj.

<p>Loading...</p>