Skip to content

Latest commit

 

History

History
148 lines (88 loc) · 7.32 KB

01-node-yarn-package-json.md

File metadata and controls

148 lines (88 loc) · 7.32 KB
Raw

01 - Node, Yarn, oraz package.json

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.