01 - Node, Yarn и package.json

April 15, 2017 · View on GitHub

Кода за тази глава можете да намерите тук.

В тази глава ще започнем с настройка на Node, Yarn, първоначален вид на package.json файла и ще екпериментираме с произволен пакет (package).

Node

💡 Node.js е среда за изпълнение на JavaScript. Главно се използва за бек-енд разработки, но също така може да бъде използван за всякакви други. В контекста на фронт-енд разбработването, може да бъде използван за изпълнението на цял набор от задачи - линтинг (linting), тестване (testing), сглобяване на файлове и т.н.

В това ръководство ще използваме Node за почти всичко, така че ще ви трябва. За да го свалите отидете тук за макОС или Уиндоус, или използвайте package manager installations page за дистрибуции на Линукс.

Например, на Ubuntu / Debian, можете да използвате следната команда, за да инсталирате Node:

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

Ще имате нужда от версии на Node > 6.5.0.

Инструменти за управление на версиите на Node

Ако имате нужда да бъдете гъвкави и да можете да използвате различни версии на Node, прочетете тук или тук.

NPM

NPM е основния мениджър за управление на пакети за Node. Инсталира се автоматично с инсталацията на Node. Мениджърите за управление на пакети се използват за инсталиране и управление на пакети (модули от код, написани от вас или някой друг). Ще използваме много пакети в това ръководство, но ще използваме друг пакетен мениджър, който се нарича Yarn.

Yarn

💡 Yarn е друг Node пакетен мениджър, който е много по-бърз от NPM, има офлайн подръжка и си извлича зависимостите (dependencies) по-предсказуемо.

След като излезе през октомври 2016, се прие доста добре и скоро може би ще се превърне в избора за пакетен мениджър на JavaScript обществото. Ако искате да продължите да използвате NPM можете просто да замествате всички yarn add и yarn add --dev команди в това ръководство с npm install --save И npm install --save-dev.

Инсталирайте Yarn, следвайки следните инструкции за вашата операционна система. Аз препоръчвам използването на инсталационния скрипт от Alternatives таба ако сте с macOS или Unix, за да не трябва да разчитате на други пакетни мениджъри:

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

package.json

💡 package.json е файлът, който се използва за описване и конфигуриране на вашият JavaScript проект. Съдържа обща информация (името на проекта ви, версия, участници в проекта, лиценз и т.н.), конфигурационни настройки за инструментите, които използвате и дори секция за стартиране на задачи (tasks).

  • Създайте нова папка, в която ще работите и влезте в нея с командата cd изпълнена в командия ред (cmd за Windows).
  • Изпълнете yarn init и отговорете на въпросите (изпълнете yarn init -y ако искате да прескочите частта с въпросите), за да генерирате package.json файл автоматично.

По-долу можете да видите простичък package.json файл, който ще използвам в това ръководство:

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

Hello World

  • Създайте index.js файл, който да съдържа console.log('Hello world')

🏁 Изпълнете node . в папката (index.js е файла по подразбиране, който Node търси в една папка/директория). Това трябва да отпечата "Hello world".

Забележка: Виждате ли иконката 🏁 флаг? Ще я използвам всеки път когато достигнете до ключов момент в текущото ръковоство. Понякога ще пишем много код (и ще правим много промени на веднъж), който код ще можете да изпълните едва когато достигнете до следващ такъв ключов момент, обозначен с такава иконка.

start script

Стартирането на node ., за да изпълним нашата програма е на прекалено ниско ниво. Ще използваме NPM/Yarn скрипт за стартиране на изпълнението на този код вместо нас. Това ще ни даде едно ниво на абстракция, което ще ни позволи да използваме винаги yarn start, дори когато нашата програма стане по-сложна.

  • В package.json, добавете scripts обект, както следва:
{
  "name": "your-project",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "node ."
  }
}

start е името, което даваме на задачата, която ще стартира нашата програма. В това ръководство ще създадем множество различни задачи в scripts обекта. start е името, което обикновено се дава на задачата по подразбиране в едно приложение. Някои други стандартни имена на задачи са stop и test.

package.json трябва да бъде валиден JSON файл, което означава, че не може и не трябва да съдържа "trailing commas" - всеки ред се отделя от следващия със запетая с изключение на последния такъв, на него запетая не се поставя. Така че бъдете внимателни когато редактиране ръчно вашия package.json файл.

🏁 Изпълнете yarn start. Трябва да отпечата Hello world.

Git and .gitignore

  • Инициализирайте ново Git репозитори с git init

  • Създайте .gitignore файл и добаведе следното в него:

.DS_Store
/*.log

.DS_Store файловете са автоматично генерирани файлове от макОС, които не трябва никога да поставяте във вашето репозитори.

npm-debug.log и yarn-error.log са файлове, които се създават когато възникне грешка при работата с вашия пакетен мениджър, тях също не бива да ги поставяте в репозиторито си, тъй като няма нужда от следене и контрол на версиите им.

Инсталиране и използване на пакет

В тази глава ще инсталираме и използваме един пакет. "Пакет" (а "package") е просто парче код, който някой е написал и вие можете да използвате във вашия код. Пакетите могат да бъдат всякакви. Тук ще използваме пакет, който ни помага да манипулираме цветове например.

  • Инсталирайте пакета color чрез изпълнение на следната команда: yarn add color

Отворете файла package.json и ще видите как Yarn е добавил автоматично color в dependencies.

Също така ще видите папка node_modules, която също се създава автоматично и съдържа инсталираните пакети.

  • Добавете node_modules/ във вашия .gitignore файл.

Ще забележите и друг автоматично генериран от Yarn файл, yarn.lock. Ще трябва да добавите този файл във вашето репозитори, тъй като чрез него ще гарантирате, че всеки от вашия екип ще използва едни и същи версии на вашите пакети. Ако използвате NPM вместо Yarn, еквивалента на този файл е shrinkwrap.

  • Напишете следното във вашия index.js файл:
const color = require('color')

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

console.log(redHexa)

🏁 Изпълнете yarn start. Това трябва да отпечата #FF0000.

Поздравления, вие инсталирахте и използвахте първия си пакет!

color беше използван в тази секция просто, за да ви научи как да използвате пакети. Няма да имаме нужда от него повече, така че можете да го деинсталирате:

  • Изпълнете yarn remove color

Два вида зависимости (dependencies)

Има два вида пакетни зависимости (package dependencies), "dependencies" и "devDependencies":

Dependencies са библиотеки, от които има нужда вашето приложение, за да функционира (React, Redux, Lodash, jQuery, т.н.). Инсталираме ги чрез изпълнението на: yarn add [package].

Dev Dependencies са библиотеки използвани по време на разработката или "билдването" (довеждането му в краен вид за употреба от крайния потребител) на вашето приложение (Webpack, SASS, linters, testing frameworks, т.н.). Тях инсталираме чрез изпълнението на: yarn add --dev [package].

Следваща глава: 02 - Babel, ES6, ESLint, Flow, Jest, Husky

Назад към съдържанието..