Skip to content

Latest commit

 

History

History
147 lines (87 loc) · 10.8 KB

01-node-yarn-package-json_ru.md

File metadata and controls

147 lines (87 loc) · 10.8 KB
Raw

01 - Node, Yarn, и package.json

Код для этой главы доступен здесь.

В этой части мы настроим Node, Yarn, простой файл package.json и протестируем пакет.

Node

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

Мы будем использовать Node буквально везде в этом руководстве, так что вам нужно будет ее установить. Зайдите на страницу загрузки для macOS или Windows дистрибутивов, или на страницу установки пакетного менеджера для linux.

Например для 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, рассмотрите NVM или tj/n.

NPM

NPM - менеджер пакетов Node по умолчанию. Он автоматически устанавливается вместе с Node. Менеджеры пакетов используются для установки и управления пакетами (модулями кода, которые написали вы или кто-то другой). Мы будем использовать много пакетов в этом руководстве, но мы установим Yarn - другой пакетный менеджер.

Yarn

💡 Yarn - менеджер пакетов Node.js гораздо более быстрый чем NPM, поддерживает offline режим и с более предсказуемой загрузкой пакетов.

С момента выхода в Октябре 2016 он очень быстро получил признание, и, возможно, скоро станет основным менеджером пакетов для JavaScript сообщества. Если вы хотите остаться с NPM, вы можете просто заменить в этом руководстве все команды yarn add и yarn add --dev на npm install --save and npm install --save-dev.

Установите Yarn, следую инструкциям для вашей ОС. Если вы на macOS или Unix, я бы рекомендовал использовать установочный Script из вкладки Alternatives, чтобы избежать взаимодействий с другими пакетными менеджерами:

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

package.json

💡 package.json - файл, используемый для описания и конфигурирования вашего JavaScript проекта. Он содержит основную информацию (имя проекта, версия, контрибьюторы, лиценция и т.д.), конфигурационные настройки для инструментов, которые вы используете и даже раздел для запуска задач.

  • Создайте новую папку для работы и cd в нее.
  • Запустите 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 и .gitignore

  • Инициализируйте репозиторий Git с помощью git init

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

.DS_Store
/*.log

.DS_Store - автогенерируемые macOS файлы, которые никогда не должны быть в вашем репозитории.

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

Установка и использование пакетов

В этой части мы установим и воспользуемся пакетом. "Пакет" - это просто кусок кода, который написал кто-то другой и который вы можете использовать в своем собственном коде. Это может быть что угодно. Сейчас, например, мы попробуем пакет, который помогает манипулировать цветами.

  • Установим созданный сообществом пакет, который называется color, запустив yarn add color.

Откройте package.json чтобы увидеть как Yarn автоматически добавил color в dependencies.

Папка node_modules была создана для хранения пакетов.

  • Добавьте node_modules/ в .gitignore

Вы также заметите файл yarn.lock, сгенерированный Yarn. Вам нужно добавить коммит с этим файлом в репозиторий, поскольку это даст уверенность, что все в вашей команде используют одни и теже версии пакетов. Если вы предпочитаете 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" и "devDependencies"

Dependencies - библиотеки, нужные чтобы ваше приложение функционировало (React, Redux, Lodash, jQuery, etc). Вы устанавливаете их с помощью yarn add [package].

Dev Dependencies - библиотеки, используемые во время разработки или для сборки вашего приложения (Webpack, SASS, linters, testing frameworks, etc). Устанавливайте их с помощью yarn add --dev [package].

Следующий раздел: 02 - Babel, ES6, ESLint, Flow, Jest, Husky

Назад в содержание.