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

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

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

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

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

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

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

• 🎉 Больше параметров стиллизации: вы можете использовать модули и из коробки.

• 🐠 Мы обновились до Babel 7, включающего поддержку синтаксиса фрагментов React и множество исправлений.

• 📦 Мы обновились до webpack 4, который автоматически разбивает JS бандлы более интеллектуально.

• 🃏 Мы обновились до Jest 23, который включает в себя интерактивный режим для просмотра снимков.

• 💄 Мы добавили PostCSS, чтобы вы могли использовать новые функции CSS в старых браузерах.

• 💎 Вы можете использовать , , и другие сторонние преобразования Babel Macros.

• 🌠 Теперь вы можете и использовать его в JSX.

• 🐈 Вы можете попробовать экспериментальный режим , который удаляет node_modules.

• 🕸 Теперь вы можете в режиме разработки чтобы соответствовать вашему бэкэнд-API.

• 🚀 Теперь вы можете использовать , не ломая билд.

• ✂ Теперь при желании вы можете получить меньший бандл CSS, если планируете использовать только современные браузеры.

• 👷‍♀ Service workers теперь подключены и построены с использованием Google Workbox.

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

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

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

Обновление невыгруженного проекта до 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), теперь поддерживается "из коробки".

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

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

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

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

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

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

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

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

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

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

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