01 - Node, Yarn, oraz package.json

February 20, 2020 路 View on GitHub

Kod dla tego rozdzia艂u dost臋pny jest tutaj.

W tej sekcji skonfigurujemy Node, Yarn, podstawowy plik package.json i wypr贸bujemy pakiet.

Node

馃挕 Node.js to 艣rodowisko wykonawcze JavaScript. Jest u偶ywany g艂贸wnie do programowania Back-End, ale tak偶e do og贸lnych skrypt贸w. W kontek艣cie programowania Front-End mo偶na go u偶ywa膰 do wykonywania ca艂ej gamy zada艅, takich jak linting, testowanie i sk艂adanie plik贸w.

B臋dziemy u偶ywa膰 Node w zasadzie do wszystkiego w tym samouczku, wi臋c b臋dziesz go potrzebowa膰. Przejd藕 do strony pobierania dla plik贸w binarnych macOS lub Windows, lub do strony instalacji mened偶era pakiet贸w dla dystrybucji Linux.

Na przyk艂ad, dla Ubuntu / Debian, uruchomi艂by艣 nast臋puj膮ce polecenia, aby zainstalowa膰 Node:

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

Chcesz dowolnej wersji Node > 6.5.0.

Node Version Management Tools

(Narz臋dzia do zarz膮dzania wersjami Node)

Je艣li potrzebujesz elastyczno艣ci, aby u偶ywa膰 wielu wersji Node, sprawd藕 NVM lub tj/n.

NPM

NPM jest domy艣lnym mened偶erem pakiet贸w dla Node. Jest instalowany automatycznie wraz z Node. Mened偶ery pakiet贸w s艂u偶膮 do instalowania pakiet贸w i zarz膮dzania nimi (modu艂贸w kodu napisanych przez Ciebie lub kogo艣 innego). W tym samouczku wykorzystamy wiele pakiet贸w, ale u偶yjemy Yarn, innego mened偶era pakiet贸w.

Yarn

馃挕 Yarn jest mened偶erem pakiet贸w Node.js, kt贸ry jest znacznie szybszy ni偶 NPM, ma wsparcie offline i pobiera zale偶no艣ci bardziej przewidywalnie.

Poniewa偶 to wysz艂o w pa藕dzierniku 2016, zosta艂 bardzo szybko przyj臋ty i mo偶e wkr贸tce sta膰 si臋 mened偶erem pakiet贸w wybranej spo艂eczno艣ci JavaScript. Je艣li chcesz trzyma膰 si臋 NPM, mo偶esz po prostu zamieni膰 wszystkie polecenia yarn add i yarn add --dev tego samouczka poprzez npm install --save oraz npm install --save-dev.

Zainstaluj Yarn zgodnie z instrukcjami dla Twojego systemu operacyjnego. Polecam skorzystanie ze Skryptu instalacyjnego z zak艂adki Alternatywy je艣li korzystasz z system贸w macOS lub Unix, aby unikn膮膰 polegania na innych mened偶erach pakiet贸w:

curl -o- -L https://yarnpkg.com/install.sh | bash

package.json

馃挕 package.json to plik u偶ywany do opisywania i konfigurowania projektu JavaScript. Zawiera informacje og贸lne (nazwa projektu, wersja, wsp贸艂autorzy, licencja itp.), opcje konfiguracji u偶ywanych narz臋dzi, a nawet sekcj臋 do uruchamiania zada艅.

  • Utw贸rz nowy folder do pracy i cd w nim.
  • Uruchom yarn init i odpowiedz na pytania (yarn init -y - pomini臋cie wszystkich pyta艅), aby automatycznie wygenerowa膰 plik package.json.

Tutaj jest podstawowy package.json kt贸rego b臋d臋 u偶ywa艂 w tym samouczku:

{
  "name": "your-project",
  "version": "1.0.0",
  "license": "MIT"
}

Hello World

  • Stw贸rz plik index.js zawieraj膮cy console.log('Hello world')

馃弫 Uruchom node . w tym folderze (index.js jest domy艣lnym plikiem, kt贸rego Node szuka w folderze). Powinno wypisa膰 "Hello world".

Uwaga: widzisz t臋 馃弫 wy艣cigow膮 flag臋 emoji? B臋d臋 jej u偶ywa艂 za ka偶dym razem gdy osi膮gniesz punkt kontrolny. Czasami wprowadzamy wiele zmian z rz臋du, a Tw贸j kod mo偶e nie dzia艂a膰, dop贸ki nie dojdziesz do nast臋pnego punktu kontrolnego.

skrypt start

Uruchamianie node . dla wykonania naszego programu jest nieco zbyt niskiego poziomu. Zamiast tego u偶yjemy skryptu NPM/Yarn do uruchomienia tego kodu. To da nam niez艂膮 abstrakcj臋, aby艣my mogli zawsze u偶ywa膰 yarn start, nawet gdy nasz program stanie si臋 bardziej skomplikowany.

  • W package.json, dodaj scripts taki obiekt:
{
  "name": "your-project",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "node ."
  }
}

start to nazwa, kt贸r膮 nadajemy zadaniu, kt贸re uruchomi nasz program. B臋dzie tworzy膰 wiele r贸偶nych zada艅 w tym obiekcie scripts podczas tego samouczka. start jest typow膮 nazw膮 dla domy艣lnego zadania aplikacji. Niekt贸re inne standardowe nazwy to stop i test.

package.json musi by膰 poprawnym plikiem JSON, co oznacza, 偶e nie mo偶esz mie膰 przecink贸w ko艅cowych. Wi臋c zachowaj ostro偶no艣膰 podczas r臋cznej edycji swojego pliku package.json.

馃弫 Uruchom yarn start. Powinno wypisa膰 Hello world.

Git oraz .gitignore

  • Zainicjalizuj repozytorium Git korzystaj膮c z git init

  • Stw贸rz plik .gitignore i dodaj tam to co poni偶ej:

.DS_Store
/*.log

Pliki .DS_Store s膮 automatycznie generowanymi plikami macOS, kt贸rych nigdy nie powiniene艣 mie膰 w swoim repozytorium.

npm-debug.log i yarn-error.log s膮 plikami stworzonymi, gdy Tw贸j menad偶er pakiet贸w napotka b艂膮d, nie chcemy ich w naszym repozytorium.

Instalacja i u偶ywanie pakietu

W tej sekcji zainstalujemy i u偶yjemy pakietu. "Pakiet" to prosty kawa艂ek kodu, kt贸ry kto艣 napisa艂, i kt贸rego mo偶esz u偶y膰 we w艂asnym kodzie. To mo偶e by膰 wszystko. Tutaj, b臋dziemy pr贸bowa膰 pakietu, kt贸ry pomo偶e przyk艂adowo zmienia膰 kolory.

  • Zainstaluj pakiet stworzony przez spo艂eczno艣膰 o nazwie color wpisuj膮c yarn add color

Otw贸rz package.json aby zobaczy膰 jak Yarn automatycznie doda艂 color w dependencies.

Folder node_modules zosta艂 stworzony do przechowywania pakietu.

  • Dodaj node_modules/ do Twojego .gitignore

Zauwa偶ysz r贸wnie偶, 偶e plik yarn.lock zosta艂 wygenerowany przez Yarn. Powiniene艣 zatwierdzi膰 ten plik do swojego repozytorium, poniewa偶 zapewni to, 偶e wszyscy w twoim zespole b臋d膮 u偶ywa膰 tej samej wersji twoich pakiet贸w. Je艣li trzymasz si臋 NPM zamiast Yarn, odpowiednikiem tego pliku jest shrinkwrap.

  • Wpisz poni偶sze do Twojego pliku index.js:
const color = require('color')

const redHexa = color({ r: 255, g: 0, b: 0 }).hex()

console.log(redHexa)

馃弫 Uruchom yarn start. Powinno wypisa膰 #FF0000.

Gratulacje, zainstalowa艂e艣 i skorzysta艂e艣 z pakietu!

color jest po prostu u偶ywany w tej sekcji, aby nauczy膰 ci臋, jak korzysta膰 z prostego pakietu. Nie b臋dziemy go ju偶 potrzebowa膰, wi臋c mo偶esz go odinstalowa膰:

  • Uruchom yarn remove color

Dwa rodzaje zale偶no艣ci

Istniej膮 dwa rodzaje zale偶no艣ci pakiet贸w, "dependencies" i "devDependencies":

Dependencies to biblioteki potrzebne do dzia艂ania aplikacji (React, Redux, Lodash, jQuery itp.). Instalujesz je za pomoc膮 yarn add [package].

Dev Dependencies to biblioteki u偶ywane podczas programowania lub do budowania aplikacji (Webpack, SASS, linters, 艣rodowiska testowe itp.). Instalujesz je za pomoc膮 yarn add --dev [package].

Nast臋pna sekcja: 02 - Babel, ES6, ESLint, Flow, Jest, Husky

Powr贸t do spisu tre艣ci.