freesewing/markdown/org/blog/react-17/uk.md

---
author: "joostdecock"
caption: "Подяка nappy.co за фотографію"
date: "2021-05-24"
image: "https://cdn.sanity.io/images/hl5bw8cj/site-content/0145547c8ba61dde1a6553dc8de318f53e27cbe5-2000x1333.jpg"
intro: "FreeSewing 2.16 постачається з React 17 та Webpack 5"
title: "FreeSewing 2.16 постачається з React 17 та Webpack 5"
---


Сьогодні ми випустили FreeSewing v2.16. Для пересічного спостерігача змін не так вже й багато. І для користувачів цього сайту це, безумовно, так.

Однак, якщо ви подивитеся на поверхню, то побачите, що в цей реліз було вкладено чимало зусиль.

Давайте подивимося, що змінилося:

## create-freesewing-pattern

Найбільша зміна пов'язана з [create-freesewing-pattern](https://www.npmjs.com/package/create-freesewing-pattern) та середовищем розробки, яке він створює для вас.

Ми використовуємо [create-react-app](https://www.npmjs.com/package/create-react-app) (він же <abbr title='Create React App'>CRA</abbr>) під капотом, і FreeSewing 2.16 - це наш перший реліз, який поставляється з [React](https://reactjs.org/) 17, CRA 4 та [Webpack](https://webpack.js.org/) 5.

Перехід на CRA 4 (і його супутника [react-scripts](https://www.npmjs.com/package/react-scripts) 4) є важливим, тому що він має абсолютно новий спосіб гарячого перезавантаження вашого додатку, який називається `FAST_REFRESH`.

Недоліком є те, що це працюватиме лише для *локальних компонентів* у вашому додатку. А оскільки наше середовище розробки завантажує код вашого шаблону як (локальну) залежність, воно не перезавантажується, коли ви змінюєте файл шаблону.

Що ще гірше, Webpack 5 зберігатиме кеш у пам'яті побудованих залежностей. Тому навіть перезапуск середовища розробки не покаже зміни, які ви внесли до вашого шаблону.

Очевидно, що це не круто. І хоча, безумовно, є способи налаштувати Webpack так, щоб він поводився так, як ми хочемо, CRA не дозволяє такого роду налаштування. Ви завжди можете вилучити конфігурацію CRA (або форк реактивних скриптів), але це призведе до надмірних витрат на обслуговування.

## Середовище розробки FreeSewing: Тепер з швидким оновленням

Ми хочемо, щоб середовище розробки відображало будь-які зміни, які ви вносите до коду. І ми хотіли б використовувати нову функцію швидкого оновлення, тому що вона просто чудова.

На відміну від попереднього гарячого перезавантаження, яке просто перезавантажувало сторінку, швидке оновлення може динамічно оновлювати змінений React-компонент.

Це важлива відмінність, оскільки перезавантаження сторінки призведе до скидання середовища розробки до стану, який зберігається в локальному сховищі. Це включає найважливіші речі, такі як вимірювання, але не включає те, на що ви дивилися в середовищі розробки, конфігурацію шаблону і так далі. Тому при кожному перезавантаженні вам потрібно було робити кілька кліків, щоб повернутися до того, що ви робили, що трохи дратувало.

Швидке оновлення може виправити цю проблему, і щоб увімкнути його, все, що нам потрібно зробити, це імпортувати шаблон як локальний компонент. На жаль, CRA використовує плагін `ModuleScopePlugin` з Webpack, який забороняє імпорт локального коду з-поза папки `example/src` .

Щоб обійти це питання, біжу:

```bash
npx create-freesewing-pattern
```

тепер зв'яже `example/src/pattern` з кореневою папкою вашого шаблону. Це приводить код у локальну область видимості, щоб його можна було коректно завантажити та швидко оновити.

У цього підходу є ще одна перевага: Якщо раніше вам доводилося запускати два термінали - один для побудови/перегляду коду шаблону, а інший для побудови/перегляду середовища розробки, - то тепер вам потрібно завантажити лише один, оскільки середовище розробки також буде будувати/переглядати код шаблону.

Розробники радіють 🎉.

## Міграція реакційного розпаду 5 до 6

Ще однією важливою зміною є [react-markdown](https://www.npmjs.com/package/react-markdown). Ми вже оновили його на наших веб-сайтах (це частина міграції на Gatsby v3, яку ми завершили на початку цього місяця), але ми також використовуємо його в нашому середовищі розробки.

Це відносно тривіальна зміна, коли вміст націнки більше не передається як явний проп:

```jsx
<Markdown source={`Hello, I am **Markdown**`} />
```

Але не через спеціальний *дитячий* проп.

```jsx
<Markdown>Привіт, я **Markdown**</Markdown>
```

## Оновлені плагіни згортання

Наступні плагіни згортання також зазнали значних змін:

- rollup-plugin-terser 6 => 7
- @rollup/plugin-commonjs 14 => 19
- @rollup/plugin-node-resolve 8 => 13

Це не повинно викликати жодних проблем, якщо тільки ви не об'єднуєте власні візерунки для фріволіте. Якщо ви натрапили на якісь корчі, [дайте нам знати](https://discord.freesewing.org/).

## Значення за замовчуванням для списку браузерів

Зараз ми використовуємо рекомендовані `налаштування за замовчуванням` для [списку браузерів](https://github.com/browserslist/browserslist) , який керує підтримкою браузером крос-компіляторів, таких як [Babel](https://babeljs.io/).

Раніше у нас був набір користувацьких налаштувань, але немає жодної реальної причини не дотримуватися налаштувань за замовчуванням.

Це може потенційно вплинути на підтримку деяких дуже старих браузерів, але, швидше за все, це теж пройде непоміченим.

## Підсумок

У самому коді FreeSewing змінилося не так багато, але є купа змін, які впливають на залежності та пакунки.

Зазвичай це найскладніші та найбільш езотеричні речі в будь-якому JavaScript-проекті.

Якщо після оновлення до FreeSewing v2.16 у вас виникнуть проблеми, будь ласка, [перейдіть на наш сервер Discord](https://discord.freesewing.org/) , щоб ми могли вам допомогти.

Тим не менш, якщо ви використовуєте одну і ту ж версію різних пакетів FreeSewing, у вас не повинно виникнути жодних проблем.