Create React App 2.0: Babel 7, Sass и другое

Октябрь 01, 2018 Джой Хаддад и Дэн Абрамов


Сегодня состоялся релиз приложения Create React App 2.0, который предоставил годичные улучшения в едином обновлении зависимостей

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

Многие из инструментов, на которые оно опирается, с тех пор также выпустили новые версии, содержащие новые функции и улучшения производительности: Babel 7, webpack 4 и Jest 23. Однако обновление их вручную и обеспечение совместной работы требуют больших усилий. И это именно то, чем авторы Create React App 2.0 были заняты последние несколько месяцев: миграция конфигурации и зависимостей, так что вам не нужно делать это самостоятельно.

Теперь, когда Create React App 2.0 вышел из бета-версии, давайте посмотрим, что нового появилось и каким образом вы можете это попробовать.


Внимание!

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


Что нового?

Вот краткое резюме того, что нового в данном релизе:

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


Старт проекта с Create React App 2.0

Вам не нужно ничего специально обновлять. Начиная с сегодняшнего дня, когда вы запускаете команду create-react-app, она по умолчанию будет использовать версию шаблона 2.0. Великолепно!

Если по какой-то причине вы хотите использовать старый шаблон 1.x, вы можете сделать это, передав --scripts-versi[email protected] в качестве аргумента для create-react-app.


Обновление проекта до Create React App 2.0

Обновление невыгруженного проекта до Create React App 2.0 как правило должно быть простым. Откройте файл package.json в корне вашего проекта и найдите в нем поле react-scripts.

Затем измените его версию на 2.0.3:


Код
    
  // ... другие зависимости проекта ...
  "react-scripts": "2.0.3"
  

Выполните команду npm install (или yarn, если вы его используете). Для многих проектов этого однострочного изменения достаточно для обновления!

Вот еще несколько советов, которые помогут вам начать.

Когда вы запустите npm start в первый раз после апгрейда, вы получите запрос о том, какие браузеры вы хотите поддерживать. Нажмите y, чтобы принять значения по умолчанию. Они будут записаны в ваш package.json, и затем вы можете редактировать их в любое время. Create React App будет использовать эту информацию для создания небольших или полифилл CSS-бандлов в зависимости от того, нацелены ли вы на современные браузеры или на старые.

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

Если вы ранее выгрузили (выполнили eject) приложение, но теперь хотите провести апгрейд, одно из распространенных решений - найти коммиты, в которых вы выгрузили приложение (и любые последующие коммиты, изменяющие конфигурацию), отменить их, провести апгрейд и позже при необходимости снова выгрузить. Также возможно, что функция, которую вы выгрузили (например, модули Sass или CSS), теперь поддерживается "из коробки".


Внимание!

Из-за возможной ошибки в npm вы можете увидеть предупреждения о неудовлетворенных зависимостях. Вам стоит их игнорировать. Насколько нам известно, эта проблема отсутствует в Yarn.


Ломающие изменения

Вот краткий список ломающих изменений в этом релизе:

  • Node 6 больше не поддерживается.

  • Поддержка старых браузеров (таких как IE 9 - IE 11) теперь включена c помощью отдельного пакета.

  • Разбиение кода с помощью import() теперь ведет себя ближе к спецификации, в то время как require.ensure() отключен.

  • Среда Jest по умолчанию теперь включает jsdom.

  • Поддержка указания объекта в качестве proxy настройки была заменена поддержкой пользовательского модуля прокси.

  • Поддержка расширения .mjs удалена, пока экосистема вокруг него не стабилизируется.

  • Определения PropTypes автоматически удаляются из продакшен билдов.

  • Если какой-либо из этих пунктов вас затрагивает, примечания к релизу 2.0.3 содержат более подробные инструкции.


Узнать больше

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


Примечание

Если вы использовали альфа-версии 2.x, мы предоставляем для них отдельные инструкции по миграции.


Благодарности

Этот релиз был бы невозможен без нашего замечательного сообщества участников. Мы хотели бы поблагодарить Андреаса Седерстрёма, Клемента Хоанга, Брайана Нг, Кента С. Доддса, Аде Вианакрисна Фадлила, Андрея Ситника, Ро Саваджа, Фабиано Брито, Яна Сазерленда, Пита Нюкянена, Джеффри Посника, Джека Чжао, Тобиаса Коппера, Генри Чжу, Maël Nison, XiaoYan Li, Marko Trebizan, Marek Suscak, Mikhail Osher и многих других, кто предоставил обратную связь и тестирование для этого выпуска.