Как я обновил свой проект до React 17 и Webpack 5

Я работаю с React уже несколько лет. До сих пор, после каждого выпуска, он всегда с нетерпением ждал возможности опробовать новые функции. Но с React 17 этого не произошло. Он рекламировался как выпуск без новых функций.

Сначала я был немного разочарован, но все равно продолжил обновление до React 17 и Webpack 5.

Позже я заметил несколько улучшений в React 17, которые я настоятельно рекомендую обновить.

В этой статье будут обсуждаться шаги по обновлению проекта React до React 17 и Webpack 5 с моим собственным набором советов, как избежать распространенных ошибок.

Зачем вам обновляться?

Обычно, как разработчики, мы дважды думаем, прежде чем обновлять проект до последних версий, потому что могут быть критические изменения, проблемы с зависимостями, предупреждения об износе и т. Д. Поэтому давайте получим общее представление о влиянии обновления до React 17 и Webpack 5.

Реагировать 17

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

Поэтому при обновлении с React 16 до 17 вы должны обновить весь проект сразу.

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

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

Кроме того, в React 17 есть много других изменений, таких как New JSX Transform, Effect Cleanup Timing, Native Component Stacks, и вы можете найти больше о них в их документации.

Webpack 5

Почти после 2 лет молчания команда Webpack выпустила свою последнюю версию под названием Webpack 5. Хорошая новость заключается в том, что вы можете найти много интересных функций, на которых основное внимание уделяется;

  • Увеличение времени сборки за счет постоянного кеширования.
  • Уменьшение размера пакета.
  • Долгосрочное кеширование.

Кроме того, в Webpack 5 внесены некоторые критические изменения.

Необходимость иметь дело с критическими изменениями всегда немного раздражает. Однако я считаю важным обновить ваши проекты до Webpack 5 раньше, чем позже.

Как обновить

Я покажу вам шаги обновления до React 17 и Webpack 5, используя проект React 16, который использует TypeScript.

Реагировать 17

Вы можете использовать NPM или Yarn для обновления, и это всего лишь однострочная команда. Я обновлю версию React и версию response-dom до React 17, а сценарии реакции до версии 4, используя следующую команду.

NPM:

npm install [email protected] [email protected] [email protected]

Пряжа:

yarn upgrade [email protected] [email protected] [email protected]

Webpack 5

Точно так же вы можете обновить версию своего проекта Webpack до последней с помощью Yarn или NPM.

NPM:

npm install webpack@next

Пряжа:

yarn add webpack@next

Вот и все. Теперь вы обновили свой проект до React 17 и Webpack 5.

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

Общие проблемы, с которыми вы можете столкнуться после обновления

Когда я обновил свой проект React 16 до React 17 и Webpack 5, я столкнулся с несколькими проблемами, и мне пришлось найти способы их исправить.

Использование нового преобразования JSX

Благодаря этому новому преобразованию JSX вам больше не нужно будет импортировать React для каждого компонента. Начиная с версии 17, это будет автоматизированная задача, которая уменьшает размер пакета.

Поскольку эти преобразования JSX были введены в выпуске Babel 7.9.0, вам сначала необходимо обновить версию Babel вашего проекта.

NPM:

npm install @babel/core@^7.9.0 @babel/preset-react@^7.9.0 --dev

Пряжа:

yarn add @babel/core@^7.9.0 @babel/preset-react@^7.9.0 --dev

Затем вам нужно внести небольшое изменение в файл конфигурации babel следующим образом:

{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

Теперь вы можете очистить все операторы импорта React в своем проекте.

Устранение проблем совместимости с реактивными скриптами и Webpack

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

Мне удалось быстро исправить эту ошибку, выполнив следующие действия:

  1. Удалите package-lock.json и node_modules в папке проекта.
  2. Удалите webpack из dependencies и devDependencies в package.json.
  3. Запустите npm install.

Если вы по-прежнему получаете сообщение об ошибке совместимости сценариев реакции, обновите свой tsconfig.json следующим образом:

{
  "compilerOptions": {
    "noFallthroughCasesInSwitch": true,
    ...
  },
  ...
}

Последние мысли

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

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

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

Поэтому важно оставить место для устранения неизвестных проблем после обновления.

Поэтому я думаю, что обновление проектов до последних версий уменьшит время ожидания следующих версий. Это связано с тем, что и React 17, и Webpack 5 закладывают основу для будущих функций.

И React 17, и Webpack 5 содержат минимальное количество критических изменений. А наличие React 17 обеспечивает постепенный процесс обновления с React 18 и далее. Поэтому это лучшее время, чтобы сделать некоторые инвестиции в будущее, улучшив свои проекты.

Спасибо за чтение!!!

Учить больше



Новые улучшения JSX в React 17
Что нового для JSX в React 17 и почему вам это должно быть небезразлично blog.bitsrc.io





Создание масштабируемых приложений React путем совместного использования пользовательских интерфейсов и хуков
Как создавать масштабируемые приложения React с независимыми и совместно используемыми компонентами пользовательского интерфейса и хуками. blog.bitsrc.io





Революция Micro Frontend с помощью Webpack 5, Module Federation и Bit
Посмотрите, как готовящийся к выпуску плагин Module Federation изменит способ работы микро-интерфейса blog.bitsrc.io