Abr@X@bra.ru
Как создавать, тестировать и деплоить React приложения в 2017
Как создавать, тестировать и деплоить React приложения в 2017

Как создавать, тестировать и деплоить React приложения в 2017

29.05.2017
524
CI - это практика развития интеграции кода в единую сборку несколько раз в день.
Сборка обычно автоматизирована и зависит от тщательных автоматических тестов, чтобы обеспечить их полное и безошибочное выполнение.
Взгляните на эту статью Мартина Фаулера, если вы хотите больше узнать о непрерывной интеграции.
Я предполагаю, что вы уже делаете следующее:
  • Вы сохраняете свой код в управлении версиями git.
  • Вы не добавляете все автоматически сгенерированные файлы в список игнорирования вашего контроля версий, т. Е. Node_modules, сгенерированный js, CSS.
Прежде чем продолжить, я хотел бы определить некоторую терминологию, которую я буду использовать:
 
Процесс сборки: процесс преобразования исходного кода в «исполняемый» пакет браузером.
Сборка: выход предыдущего процесса, артефакт, который создается во время процесса сборки, который включает в себя интерпретированный исходный код и скомпилированные файлы.
Деплой: процесс установки, BUILD на сервер.

1- Управление пакетами

Теперь, когда у вас есть репозиторий и рабочая CI-система, первое, что нужно сделать, - установить зависимости вашего кода.
В мире React.js существуют два основных менеджера зависимостей: NPM и Yarn. NPM является традиционным менеджером пакетов для Node.js. Yarn - относительно новый проект, он появилась как попытка решить некоторые из проблем, с которыми сталкивается NPM:
  • Детерминизм: гарантируйте, что установка, работающая в одной системе, будет работать точно так же в любой другой системе благодаря сжатому файлу lockfile (yarn.lock) и алгоритму детерминированной установки.
  • Безопасность. Yarn использует контрольные суммы для проверки целостности каждого установленного пакета до его выполнения.
  • Скорость: Yarn кэширует каждый загружаемый пакет.
Чтобы узнать больше о Yarn, вы можете почитать эту статью.
В принципе, вы должны использовать Yarn в качестве менеджера зависимостей. Вот некоторые рекомендации и советы по использованию Yarn:
  • Всегда делайте свой файл yarn.lock.
  • Yarn потребляет тот же формат файла, что и NPM. Если вы хотите протестировать Yarn в существующем проекте, просто введите «yarn».
  • Узнайте больше о NPM против Yarn, используя этот чит-лист.

2- Контроль качества кода

После того, как вы установили свои зависимости, вы захотите настроить важный инструмент для контроля качества вашего кода: linter.
Короче говоря, linting используется для поиска несогласованного или нежелательного кода в проекте. При написание своего кода, вы можете ловить ошибки раньше, избегать возможных ошибок, применять стандарт кодирования и сохранять свой код в чистоте.
Eslint является доминирующим в JavaScript и особенно мире React из-за простоты настройки. Каждое правило является плагином, поэтому оно поддерживает современный JavaScript и JSX. Он поставляется с набором правил по умолчанию.
Советы:
Добавьте файл `.eslintrc` в корень вашего проекта.
Если вы не знаете, с чего начать, ознакомьтесь с некоторыми настройками по умолчанию для команд Walmart или Airbnb.

3- Тестирование

Следующее, что вам нужно рассмотреть, это тестирование. Мы пишем тесты, чтобы добавить уверенность в нашем коде, поскольку они позволяют инженерам быстрее двигаться при добавлении функций и рефакторинга.
Наиболее часто используемые фреймворки JavaScript для тестирования кода React: ava, jasmine, Jest, mocha, tape.
Я рекомендуем использовать Jest, потому что он включает поддельный dom (jsdom), очень хорошо подходит для тестирования приложений React.js. Он может даже захватывать снимки деревьев React или других сериализуемых значений, чтобы упростить тестирование пользовательского интерфейса.
Jest очень быстр, так как он параллельно выполняет тесты в рамках рабочего процесса. 

4- Сборка   

На этом этапе вы хотите связать свой код и все его зависимости, что обычно делается с помощью инструмента, называемого bundler. В наши дни есть много вариантов, причем самыми популярными из них является Webpack.
Webpack предлагает достаточно мощности из коробки, в которой вам обычно не нужны Grunt или Gulp, и вы можете объявить простой конфигурационный файл для определения процесса сборки.
Webpack предполагает, что вы хотите работать с библиотеками JavaScript в различных форматах модулей, таких как CommonJS или AMD. Предполагается, что вы захотите скомпилировать различные форматы, используя длинный список загрузчиков.
 
По мере того, как ваш пакет начнет увеличиваться, ваше время загрузки увеличится, поэтому вам следует рассмотреть возможность объединения кода, загружаемого приложение в один файл, и кода, используемого на каждой странице в виде отдельного файла. Это можно сделать довольно легко с помощью webpack.
 
Вы можете просто использовать имя файла, например index.js, в качестве имени вашего пакета. Но вместо этого нужно добавить хэш (например, SHA) самого файла в имени файла, то есть index.hash.js. Это позволяет браузеру загружать обновленный файл. Вы можете легко реализовать это с помощью пакета Webpack.

5- Деплой   

Теперь вы, вероятно, захотите создать файл сборки. Главное, что файл должен включать только то, что нужно для запуска вашего приложения. Из-за этого нужно исключить исходные файлы, которые были преобразованы в скомпилированные файлы, такие как LESS, SASS, Coffeescript, а также .git, node_modules, test и т. д.


React.js
Читайте также:
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать
React vs Angular: подробное сравнение

React vs Angular: подробное сравнение

Должен ли я выбрать Angular или React? Сегодняшний полярный ландшафт JavaScript-фреймворков заставил многих разработчико...
Читать
Курс по React JS #1. Пилотный выпуск. Привет React!

Курс по React JS #1. Пилотный выпуск. Привет React!

В этом посте расскажу как написать первое простое приложение на React js.
Читать