Ваше одностраничное приложение адаптировано для мобильных устройств. Он реагирует на меньшие или большие размеры экрана и соответствующим образом адаптирует пользовательский интерфейс. Продолжая разработку мобильного веб-приложения, вы можете протестировать свое приложение на нескольких устройствах. Browsersync - мощный инструмент, который позволяет нам это делать. Он отлично работает с Webpack и Hot Reloading, добавляя синхронизированный просмотр вашего приложения на подключенных устройствах.
Установка Browsersync
Давайте настроим Browsersync для нашей среды разработки, установив следующие зависимости.
npm install --save-dev browser-sync npm install --save-dev browser-sync-webpack-plugin
Поскольку Browsersync предназначен только для разработчиков, нам нужно установить его только как devDependencies.
Конфигурация Webpack
Вот полная конфигурация веб-пакета, используемая во время разработки с добавлением Browsersync в качестве плагина.
Нам нужен плагин browser-sync-webpack-plugin. Инициализируйте несколько переменных const для хоста, порта и прокси. Добавьте плагин для BrowserSync. И готово!
Запуск Browsersync
Теперь вы можете проверить свою настройку, выполнив команду npm start в своем терминале. Вы заметите, что результат отличается от обычного экрана webpack-dev-server.
… webpack: bundle is now VALID. [BS] Proxying: http://localhost:8080 [BS] Access URLs: — — — — — — — — — — — — — — — — — — Local: http://localhost:8081 External: http://192.168.0.4:8081 — — — — — — — — — — — — — — — — — — UI: http://localhost:3001 UI External: http://192.168.0.4:3001 — — — — — — — — — — — — — — — — — — … webpack: bundle is now VALID.
Теперь вы получаете 4 новых URL-адреса. Локальный и внешний - это URL-адреса, которые можно использовать в нескольких локальных браузерах и на нескольких внешних устройствах соответственно. URL-адреса, относящиеся к пользовательскому интерфейсу, позволяют настроить среду выполнения Browsersync. В нашей настройке, которая представляет собой Mac с установленным XCode, мы используем iOS Simulator для запуска виртуального устройства для наших тестов. Открытие браузера Safari на этом виртуальном устройстве и переход по внешнему URL-адресу дает нам доступ к нашему приложению. Таким образом мы также можем подключаться к реальным физическим устройствам в той же сети.
Ссылки конфигурации пользовательского интерфейса позволяют вам настроить, будет ли синхронизированный просмотр захватывать синхронизацию кода, щелчки, прокрутку и действия формы. Таким образом, вы можете протестировать на одном устройстве и в одном браузере и автоматически заметить синхронизированные действия на всех других ваших устройствах. Browsersync также поддерживает другие расширенные функции, такие как моделирование скорости сети и удаленная отладка. Продолжай… исследуй прочь.
Что действительно круто, так это то, что горячая перезагрузка все еще работает с активным Browsersync. Поэтому, если вы внесете какие-либо изменения в свой JSX, они должны обновиться на всех устройствах при сохранении изменений. Сохраняя текущее состояние пользовательского интерфейса. Разве это не круто!
Browsersync позволяет значительно сэкономить время при тестировании гибридных мобильных и веб-приложений на нескольких устройствах.
Узнайте больше о стратегиях тестирования ваших веб-приложений в книге React Speed Coding.
