|
| 1 | +#01 - Node, Yarn, и`package.json` |
| 2 | + |
| 3 | +Код для этой главы доступен[здесь](https://github.com/verekia/js-stack-walkthrough/tree/master/01-node-yarn-package-json). |
| 4 | + |
| 5 | +В этой части мы настроим Node, Yarn, простой файл`package.json` и протестируем пакет. |
| 6 | + |
| 7 | +##Node |
| 8 | + |
| 9 | +>💡**[Node.js](https://nodejs.org/)** - среда исполнения JavaScript, в основном используется для Back-End разработки, но также и для общих целей. В контексте Front-End разработки может применяться для выполнения целого ряда задач, таких как линтинг (linting), тестирование и сборка файлов. |
| 10 | +
|
| 11 | +Мы будем использовать Node буквально везде в этом руководстве, так что вам нужно будет ее установить. Зайдите на[страницу загрузки](https://nodejs.org/en/download/current/) для**macOS** или**Windows** дистрибутивов, или на[страницу установки пакетного менеджера](https://nodejs.org/en/download/package-manager/) для linux. |
| 12 | + |
| 13 | +Например для**Ubuntu / Debian** выполните следующие команды, чтобы установить Node: |
| 14 | + |
| 15 | +```sh |
| 16 | +curl -sL https://deb.nodesource.com/setup_7.x| sudo -E bash - |
| 17 | +sudo apt-get install -y nodejs |
| 18 | +``` |
| 19 | + |
| 20 | +Вам подойдет любая версия Node > 6.5.0. |
| 21 | + |
| 22 | +##Средства управления версиями Node. |
| 23 | + |
| 24 | +Если вам нужна гибкость в использовании различных версий Node, рассмотрите[NVM](https://github.com/creationix/nvm) или[tj/n](https://github.com/tj/n). |
| 25 | + |
| 26 | +##NPM |
| 27 | + |
| 28 | +NPM - менеджер пакетов Node по умолчанию. Он автоматически устанавливается вместе с Node. Менеджеры пакетов используются для установки и управления пакетами (модулями кода, которые написали вы или кто-то другой). Мы будем использовать много пакетов в этом руководстве, но мы установим Yarn - другой пакетный менеджер. |
| 29 | + |
| 30 | +##Yarn |
| 31 | + |
| 32 | +>💡**[Yarn](https://yarnpkg.com/)** - менеджер пакетов Node.js гораздо более быстрый чем NPM, поддерживает offline режим и с[более предсказуемой](https://yarnpkg.com/en/docs/yarn-lock) загрузкой пакетов. |
| 33 | +
|
| 34 | +С момента[выхода](https://code.facebook.com/posts/1840075619545360) в Октябре 2016 он очень быстро получил признание, и, возможно, скоро станет основным менеджером пакетов для JavaScript сообщества. Если вы хотите остаться с NPM, вы можете просто заменить в этом руководстве все команды`yarn add` и`yarn add --dev` на`npm install --save` and`npm install --save-dev`. |
| 35 | + |
| 36 | +Установите Yarn, следую[инструкциям](https://yarnpkg.com/en/docs/install) для вашей ОС. Если вы на macOS или Unix, я бы рекомендовал использовать**установочный Script** из вкладки*Alternatives*, чтобы[избежать](https://github.com/yarnpkg/yarn/issues/1505) взаимодействий с другими пакетными менеджерами: |
| 37 | + |
| 38 | +```sh |
| 39 | +curl -o- -L https://yarnpkg.com/install.sh| bash |
| 40 | +``` |
| 41 | + |
| 42 | +##`package.json` |
| 43 | + |
| 44 | +>💡**[package.json](https://yarnpkg.com/en/docs/package-json)** - файл, используемый для описания и конфигурирования вашего JavaScript проекта. Он содержит основную информацию (имя проекта, версия, контрибьюторы, лиценция и т.д.), конфигурационные настройки для инструментов, которые вы используете и даже раздел для запуска*задач*. |
| 45 | +
|
| 46 | +- Создайте новую папку для работы и`cd` в нее. |
| 47 | +- Запустите`yarn init` и ответьте на вопросы (`yarn init -y` - пропустить все вопросы), чтобы создать файл`package.json` автоматически. |
| 48 | + |
| 49 | +Вот простой`package.json` который я буду использовать в этом руководстве: |
| 50 | + |
| 51 | +```json |
| 52 | +{ |
| 53 | +"name":"your-project", |
| 54 | +"version":"1.0.0", |
| 55 | +"license":"MIT" |
| 56 | +} |
| 57 | +``` |
| 58 | + |
| 59 | +##Hello World |
| 60 | + |
| 61 | +- Создайте файл`index.js` содержащий`console.log('Hello world')` |
| 62 | + |
| 63 | +🏁 Запустите`node .` в этой папке (`index.js` - файл по умолчанию, который Node ищет в папке). Должно выйти "Hello world". |
| 64 | + |
| 65 | +**Примечание**: Видите этот значек - 🏁 - гоночный флаг? Я буду его использовать каждый раз при достижении**чекпоинта**. Иногда мы будем делать много изменения подряд, и ваш код не будет работать до тех пор, пока вы не достигнете следующего чекпоинта. |
| 66 | + |
| 67 | +##`start` script |
| 68 | + |
| 69 | +Использование`node .` для запуска программ - несколько низкоуровневый подход. Вместо этого, мы будем использовать NPM/Yarn скрипты для запуска выполнения этого кода. Это даст нам отличный уровень абстракции, позволяющий всегда использовать`yarn start`, даже когда наша программа станет более сложной. |
| 70 | + |
| 71 | +- В`package.json`, добавьте такой объект`scripts`: |
| 72 | + |
| 73 | +```json |
| 74 | +{ |
| 75 | +"name":"your-project", |
| 76 | +"version":"1.0.0", |
| 77 | +"license":"MIT", |
| 78 | +"scripts": { |
| 79 | +"start":"node ." |
| 80 | + } |
| 81 | +} |
| 82 | +``` |
| 83 | + |
| 84 | +`start` - имя, которое мы дали*задаче*, которая будет запускать нашу программу. Мы создадим много различных задач в этом объекте`scripts` в ходе данного руководства.`start` - это имя по умолчанию одной из типичных задач приложения. Другие стандартные названия задач - это`stop` это`test`. |
| 85 | + |
| 86 | +`package.json` должен быть валидным JSON файлом, что означает, что вы не можете использовать конечные запятые (trailing commas). Поэтому будьте аккуратны вручную редактируя файл`package.json`. |
| 87 | + |
| 88 | +🏁 Запустите`yarn start`. Должно выйти`Hello world`. |
| 89 | + |
| 90 | +##Git и`.gitignore` |
| 91 | + |
| 92 | +- Инициализируйте репозиторий Git с помощью`git init` |
| 93 | + |
| 94 | +- Создайте файл`.gitignore` и добавьте в него следующее: |
| 95 | + |
| 96 | +```gitignore |
| 97 | +.DS_Store |
| 98 | +/*.log |
| 99 | +``` |
| 100 | + |
| 101 | +`.DS_Store` - автогенерируемые macOS файлы, которые никогда не должны быть в вашем репозитории. |
| 102 | + |
| 103 | +`npm-debug.log` и`yarn-error.log` - файлы, генерируемые пакетным менеджером при ошибках. Мы не хотим хранить их в репозитории. |
| 104 | + |
| 105 | +##Установка и использование пакетов |
| 106 | + |
| 107 | +В этой части мы установим и воспользуемся пакетом. "Пакет" - это просто кусок кода, который написал кто-то другой и который вы можете использовать в своем собственном коде. Это может быть что угодно. Сейчас, например, мы попробуем пакет, который помогает манипулировать цветами. |
| 108 | + |
| 109 | +- Установим созданный сообществом пакет, который называется`color`, запустив`yarn add color`. |
| 110 | + |
| 111 | +Откройте`package.json` чтобы увидеть как Yarn автоматически добавил`color` в`dependencies`. |
| 112 | + |
| 113 | +Папка`node_modules` была создана для хранения пакетов. |
| 114 | + |
| 115 | +- Добавьте`node_modules/` в`.gitignore` |
| 116 | + |
| 117 | +Вы также заметите файл`yarn.lock`, сгенерированный Yarn. Вам нужно добавить коммит с этим файлом в репозиторий, поскольку это даст уверенность, что все в вашей команде используют одни и теже версии пакетов. Если вы предпочитаете NPM а не Yarn, эквивалентом этому файлу будет*shrinkwrap*. |
| 118 | + |
| 119 | +- Напишите следующее в файл`index.js`: |
| 120 | + |
| 121 | +```js |
| 122 | +constcolor=require('color') |
| 123 | + |
| 124 | +constredHexa=color({ r:255, g:0, b:0 }).hex() |
| 125 | + |
| 126 | +console.log(redHexa) |
| 127 | +``` |
| 128 | + |
| 129 | +🏁 Запустите`yarn start`. Должно выйти`#FF0000`. |
| 130 | + |
| 131 | +Поздравляем! Вы установили и использовали пакет. |
| 132 | + |
| 133 | +Мы использовали`color` в этом разделе, чтобы продемонстрировать вам как использовать простой пакет. Он больше нам не потребуется, поэтому можно его удалить: |
| 134 | + |
| 135 | +- Запустите`yarn remove color` |
| 136 | + |
| 137 | +##Два вида зависимостей |
| 138 | + |
| 139 | +Пакеты могут быть двух видов зависимостей`"dependencies"` и`"devDependencies"` |
| 140 | + |
| 141 | +**Dependencies** - библиотеки, нужные чтобы ваше приложение функционировало (React, Redux, Lodash, jQuery, etc). Вы устанавливаете их с помощью`yarn add [package]`. |
| 142 | + |
| 143 | +**Dev Dependencies** - библиотеки, используемые во время разработки или для сборки вашего приложения (Webpack, SASS, linters, testing frameworks, etc). Устанавливайте их с помощью`yarn add --dev [package]`. |
| 144 | + |
| 145 | +Следующий раздел:[02 - Babel, ES6, ESLint, Flow, Jest, Husky](02-babel-es6-eslint-flow-jest-husky.md#readme) |
| 146 | + |
| 147 | +Назад в[содержание](https://github.com/verekia/js-stack-from-scratch#table-of-contents). |