Abr@X@bra.ru
Дэн Абрамов о новинках Create React App: Webpack 2

Дэн Абрамов о новинках Create React App: Webpack 2

27.05.2017
258

Менее чем год назад мы представили приложение React App как официально поддерживаемый способ создания приложений с нулевой конфигурацией. С тех пор проект пользуется огромным ростом.

Сегодня мы рады сообщить, что многие функции, которые были в разработке в течение последних нескольких месяцев, наконец-то выпущены.

Как обычно с помощью приложения «Create React App», вы можете пользоваться этими улучшениями в своих приложениях, обновляя одну зависимость и следуя нашим инструкциям по перенастройке.

Новые приложения получат эти улучшения автоматически.

Webpack 2

Это изменение было внесено @Timer в # 1291.

Мы обновили до webpack 2, который был официально выпущен несколько месяцев назад. Это большое обновление с множеством исправлений и общих улучшений. Мы тестировали его некоторое время, и теперь считаем его достаточно стабильным, чтобы рекомендовать его всем.

В то время как формат конфигурации Webpack был изменен, пользователям Create React App, не нужно беспокоиться об этом, так как мы обновили конфигурацию на нашей стороне.

Webpack предлагает руководство по перенастройке конфигурации, которое вы можете использовать для обновления своих приложений. Обратите внимание, что с каждым выпуском приложения Create React App мы работаем для поддержки большего числа вариантов использования из коробки, чтобы в будущем вам не пришлось это делать самостоятельно.

Самая большая особенность webpack 2 - возможность писать и импортировать модули ES6 напрямую, не компилируя их в CommonJS. Это не должно влиять на то, как вы пишете код, поскольку вы, вероятно, уже используете функции импорта и экспорта, но это поможет поймать больше ошибок, таких как отсутствие именованного экспорта во время компиляции:


В будущем, по мере того как экосистема вокруг модулей ES6 растет, вы можете ожидать большего улучшения для ваших приложений.

Ошибки во время работы

Вы когда-нибудь ошиблись в коде и поняли это только после того, как в консоль выводятся загадочные ошибки? Или, хуже того, вы когда-нибудь отправляли приложение с ошибками на продакшен, потому что случайно пропустили ошибку в разработке? Чтобы устранить эти проблемы, мы представляем наложение, которое появляется, когда в вашем приложении возникает непокрытая ошибка. Оно работает только в разработке, и вы можете отклонить его, нажав клавишу Escape.

Лучше посмотреть один раз GIF, чем сказать тысячи слов:


(Да, он интегрируется с вашим редактором!)

В будущем мы планируем переопределять показ ошибок во время выполнения кода, чтобы еще лучше упростить работу вашего приложение на React. Например, после React 16 мы планируем показать стеки компонентов React в дополнение к стекам JavaScript при возникновении ошибки.

Прогрессивные веб-приложения по умолчанию

По умолчанию новые проекты создаются как Progressive Web Apps. Это означает, что приложение использует стратегию кэширования в автономном режиме, чтобы свести к минимуму время, затрачиваемое на обслуживание приложения, тем пользователям, которые посещают его снова. Вы можете отказаться от этого поведения, но мы рекомендуем его как для новых, так и для существующих приложений, особенно если вы настроили таргетинг на мобильные устройства.


Новые приложения автоматически обладают этими функциями, но вы можете легко преобразовать существующий проект в прогрессивное веб-приложение, следуя нашему руководству по миграции.

Мы добавим больше документации по этой теме в ближайшие недели. Пожалуйста, не стесняйтесь задавать любые вопросы по отслеживанию проблем!

Jest 20

Сейчас мы используем последнюю версию Jest, которая включает многочисленные исправления и улучшения. Вы можете подробнее узнать об изменениях в сообщениях Jest 19 и Jest 20.

Основные моменты включают новый иммерсивный режим просмотра, улучшенный формат моментальных снимков, улучшения при печати пропущенных тестов и новые API-интерфейсы тестирования.


Разделение кода с динамическим импортом ()

Важно свести начальную полезную нагрузку JavaScript веб-приложений к минимуму и загрузить остальную часть кода по требованию. Несмотря на то, что разделение кода с помощью Create React App поддерживало использование метода require.ensure () со времени первого выпуска, он использовал синтаксис, специфичный для webpack, который не работал в Jest или других средах.

В этом выпуске мы добавляем поддержку предложения dynamic import (), которое соответствует будущим веб-стандартам. В отличие от require.ensure (), он не нарушает тесты Jest и должен в конечном итоге стать частью JavaScript. Мы рекомендуем вам использовать import (), чтобы отложить загрузку кода до тех пор, пока вам не понадобится делать рендер.


Вывод консоли, стал еще лучше

Мы улучшили вывод консоли по всем направлениям.

Например, при запуске сервера разработки мы теперь отображаем адрес локальной сети дополнительно к адресу localhost, чтобы вы могли быстро получить доступ к приложению с мобильного устройства в той же сети:


Когда появляется ошибка в консоле, мы больше не показываем предупреждения, чтобы вы могли сосредоточиться на более важных вопросах. Ошибки и предупреждения в производственном выпуске лучше отформатированы, и размер шрифта с наложением ошибок теперь более точно соответствует размеру шрифта браузера.

Вывод

Этот выпуск является результатом многомесячной работы многих людей в сообществе React. Оно ориентировано на улучшение как разработчиков, так и конечного пользователя, поскольку мы считаем, что они дополняют друг друга и идут рука об руку.

Вы можете прочитать полный список изменений и руководство по миграции в примечаниях к выпуску v1.0.0.



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

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

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

Flexbox и как делать адаптивные сайты

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющи...
Читать
10 вредных советов для начинающих разработчиков

10 вредных советов для начинающих разработчиков

Другие программисты могут не согласиться с данными советами, но это именно то, что делает их такими редкими и ценными.
Читать