React v17 вызвал много шума, который встряхнул экосистему внешнего интерфейса. Наконец-то обещание появилось на горизонте 🏝, но это также сломало мой процесс разработки 😩 в текущих проектах. Допустим, у вас есть возможность начать все сначала — столько свободного времени. правильно? 😷
Настройка babel и webpack
Позвольте устанавливать пакеты быстро
npm i -D html-webpack-plugin webpack webpack-cli babel-loader @babel/core @babel/preset-react
реагировать и реагировать-дом
npm i react react-dom
Создайте webpack.config.js как базовую конфигурацию.
Я знаю, что некоторые из вас, эксперты, могли заметить пропажу mode. Давайте сделаем это сейчас 🙂, создав конфигурацию разработки webpack.development.js и рабочую конфигурацию webpack.production.js.
Вуаля!!!, у нас есть две конфигурации. Вы также можете рассмотреть возможность использованияwebpack-merge, если вам нужно выполнить более сложное слияние конфигураций. Но я предпочитаю KISS 😘
Настройка каверзного малыша
Создать .babelrc.js
Обратите внимание на runtime, это необходимо, потому что automatic не используется по умолчанию в @babel/preset-react еще в v7.x.x, но будет в v8.x.x
Настройка скрипта
Отредактируйте файл package.json и добавьте сценарии start и build.
Создание нового приложения с помощью React v17 😎
Создайте index.html, который будет использоваться html-webpack-plugin, чтобы нам не нужно было управлять загрузкой наших ресурсов.
Загрузка нашего реагирующего приложения
Наш первый компонент React
Обратите внимание, что нам не нужно импортировать реакцию. Это одно из изменений в версии 17.x.x
Итак, приступаем, выполняем npm start и обслуживаем ваши активы.
P.s. Если вы хотите узнать, как обслуживать ассеты сборки во время разработки, смотрите Часть II
Заключение
Поздравляю !!! 👏🏻 . Я считаю, что настройка разработки должна быть максимально простой. Нет смысла усложнять ситуацию именно в этом году, когда мир борется с пандемией. Берегите себя и продолжайте кодить.
