Прежде чем мы начнем, я хочу сообщить вам, читатель, что я планирую обновлять эту информацию в обозримом будущем. Итак, если что-то сломалось, ПОЖАЛУЙСТА, дайте мне знать в комментариях, чтобы я мог это исправить. Я надеюсь никогда не устанавливать пакеты с явными номерами версий без крайней необходимости.
Итак, вы кое-что узнали о React и построили несколько вещей. Вы, вероятно, использовали create-react-app или react-slingshot, чтобы быстро начать работу с минимальной настройкой. Однако теперь вы готовы рискнуть самостоятельно со своим собственным шаблоном React.
КУДА. К. НАЧНИТЕ?
Недавно я столкнулся с той же дилеммой. Это было нелегко, но в итоге у меня был надежный репозиторий, который я мог использовать в качестве основы для будущих проектов React.
Я понял, что хочу использовать webpack, потому что это новая популярность (ну, не такая уж новая), но у меня не было бы много ресурсов, чтобы разобраться в этом.
У меня нулевые рабочие знания о Grunt или Gulp, хотя, бегло взглянув на них, я понимаю, что они сами по себе кое-что успокаивают.
Кроме того, мои знакомые, которые знают больше, чем я, используют webpack. У меня также была эталонная конфигурация шаблонного веб-пакета React, которую я собирался использовать в качестве основы (но я быстро понял, что мне придется переписать большую часть этой конфигурации).
Back to the beginning
Но давайте вернем это обратно. Что на самом деле представляет собой шаблон? Dictionary.com не смог найти мне подходящего определения. Oxford Dictionaries, с другой стороны, получили W с:
3.1 Стандартизированные фрагменты текста для использования в качестве статей контрактов или как часть компьютерной программы.
Это работает. Так что это стандарт для компьютерных программ. Как и в каком-то коде, это всегда одно и то же, по крайней мере теоретически. Таким образом, вместо того, чтобы запускать такие вещи, как npm i react react-dom webpack и так далее, каждый раз, когда мы запускаем проект, мы можем скопировать наш шаблон и отправиться в гонку, зная, что все важные части, которые мы хотим, готовы к работе.
А поскольку мы будем создавать свой собственный шаблон, мы будем знать, что все поддерживается так, как мы этого хотим, потому что это наше. Мы также узнаем много в ходе этого процесса и, возможно, даже решим принимать решения, отличные от того, что нам предлагали сделать другие.
Получить Git
Сначала давайте создадим локальную папку и сделаем ее репозиторием Git.
Перво-наперво
Итак, какой это был бы проект без README.md? В каждом репозитории должен быть файл readme. Даже если это просто напоминание вам о том, как все работает. Поверьте мне, может показаться, что вы точно запомните, что делает каждый сценарий и почему прямо сейчас. Однако через год эти readme пригодятся! Поверьте мне. Итак, создайте README.md в корне проекта. Поместите туда что-то вроде этого:
Не забудьте зафиксировать свои файлы в Git после внесения любых изменений:
Структура папки
Это довольно просто. Сделайте следующую структуру папок, чтобы разместить все:
Вы можете легко сделать это с помощью этой команды:
.gitignore
Важной частью любого проекта Git является файл .gitignore. Это говорит Git не помещать определенные файлы под контроль версий. Это важно для таких вещей, как пакеты и другие вещи, которые мы будем извлекать из репозиториев. Они не только не нужны нам в системе контроля версий, но и вредны, если мы все же включаем их в систему контроля версий. По крайней мере, я почти уверен, что это вредно.
Создайте файл .gitignore в корне вашего проекта и добавьте к нему следующее:
Для этого файла есть генераторы, например, этот, но этого должно быть достаточно для того, что мы делаем сегодня.
npm
Все проекты узлов должны быть инициализированы, чтобы мы могли использовать диспетчер пакетов. Это создаст для нас package.json файл, который должен находиться в системе контроля версий.
В нем много всего, но самые важные из них:
- Список всех установленных пакетов и их семантическая версия.
- Скрипты
Чтобы начать этот процесс, введите в терминал в корне вашего проекта следующее:
Вам будет предложено больше, чем несколько вопросов, но вы можете просто нажать Enter и оставить все поле пустым. В конце концов у вас будет блестящий новый package.json, который выглядит примерно так:
HTML
Да! Пора написать код! Что ж, это будет самый скучный HTML-код, который вы, вероятно, когда-либо напишете. Создайте index.html в корне вашего проекта и настройте его так:
Реагировать
Теперь давайте добавим React в наш проект.
Создайте этот файл /src/components/App.js и поместите в него следующее:
Затем мы отрендерим приложение через индекс, который мы создадим здесь, в /src/index.js, и поместим в него следующее:
Вавилон
Babel потрясающий. Это позволяет нам писать новейший и лучший JavaScript, обеспечивая при этом максимальную совместимость с поставляемым нами кодом. Во-первых, мы должны установить Babel и несколько дополнительных пакетов Babel, чтобы все это работало вместе. Не волнуйтесь, я скоро объясню.
Затем нам нужно создать .babelrc в корне нашего проекта и добавить к нему следующее:
Что именно это делает? Предустановка env неявно включает вместе babel-preset-es2015, babel-preset-es2016, babel-preset-es2017 и babel-preset-latest, что означает, что вы можете запускать код ES6, ES7 и ES8.
Пресет react Я думаю довольно очевиден, но вам может быть интересно, зачем он нам нужен, если React - это JavaScript. Это потому, что Babel не знает, что делать с React и JSX.
ПРИМЕЧАНИЕ. Я удалил пресет stage-2 из этого обновления. Если вам интересно, почему, прочтите этот замечательный пост от команды Babel: Удаление предустановок сцены Babel.
Тесты
Так что мы добиваемся прогресса. Теперь, когда у нас есть компонент React с нашим App.js, давайте создадим простой связанный тест для этого компонента. Таким образом, мы начинаем внедрять некоторые передовые практики, например проводить тесты для вещей, которые мы создаем. В этом проекте мы будем использовать Jest с Enzyme. Перво-наперво, давайте установим его с помощью:
Теперь создайте /test/enzyme.setup.js и вставьте в него:
Нам нужно будет добавить функциональность Jest в наш package.json, поэтому добавьте к нему следующее:
Затем мы должны добавить наш первый компонентный тест! Итак, создайте файл по адресу /test/App.test.js, чтобы проверить, правильно ли отображается наш компонент приложения. Мы также собираемся реализовать тест снимков, чтобы убедиться, что структура нашего компонента не меняется от теста к тесту. Для этого нам понадобится следующее:
Вам может быть интересно, как запустить этот новый тест. Для этого нам нужно изменить сценарий test в package.json на следующий:
Теперь вы можете запустить тест со своего терминала с помощью npm test, и вы должны увидеть что-то вроде этого:
Перерыв
ПОЗДРАВЛЯЕМ, если вы так далеко зашли со своим шаблоном React! В основном потому, что вы поняли, что я использую изображения для своего кода, и вам нужно все это напечатать. Я знаю, что это заноза в заднице. Однако поверьте мне, вы узнаете больше, чем знаете, если вас заставят все это напечатать, и мышечная память будет служить вам еще долго после этого урока.
webpack
webpack позволит нам модулировать наш код и легко объединить его в один файл для производства. Что-то, что я думаю, многим людям действительно нравится в webpack, так это сервер разработки. Мы начнем с установки веб-пакета с:
webpack по умолчанию ищет webpack.config.js файл в корне проекта, поэтому давайте создадим его и добавим к нему пару вещей:
entry сообщает веб-пакету, где найти базовый файл JavaScript. В нашем приложении это index.js. Затем он сообщает ему, где вывести построенный файл, когда он будет с ним работать.
загрузчики веб-пакетов
Загрузчики - это полезные элементы, которые мы можем добавить в webpack, чтобы сделать его более мощным и сделать что-то с другими типами файлов. Прежде чем webpack заработает должным образом, нам нужно настроить его для работы с ES6 и JSX. Мы сделаем это через babel-loader. Добавьте babel-loader в свой проект с помощью:
Затем добавьте загрузчик в свой webpack.config.js вот так:
Чтобы использовать Sass и SCSS, нам понадобится другой загрузчик. Теперь, чтобы получить максимальную отдачу от наших вложений, мы объединим три загрузчика вместе, чтобы наши стили сразу же применялись к DOM. Установим загрузчики:
И настроим это так в нашем webpack.config.js:
Поскольку мы только что включили некоторую поддержку стилей, давайте добавим их. Создайте /src/styles/style.sass и вставьте в него:
Затем добавьте его в свой index.js вот так:
Далее идут плагины для веб-пакетов. Итак, нам нужен способ включить встроенный JavaScript в наш index.html и, конечно же, есть способ сделать это автоматически. Это также возьмет файл index.html и поместит его в нашу папку сборки (подробнее о сборке позже). Давайте добавим HtmlWebPackPlugin и включим его в наш webpack.config.js вот так:
Потом:
Наш следующий плагин будет гарантировать, что каталог, в который мы помещаем нашу сборку, очищается от всех предыдущих файлов каждый раз, когда мы запускаем сборку. Мы делаем это с помощью этих двух шагов:
Потом:
Момент, которого мы все ждали! Давайте настроим сервер разработки. Итак, на этом этапе мы добавим два пакета. webpack-cli будет использоваться для выполнения наших команд из нашего package.json файла. Первый:
Затем обновите наш webpack.config.js:
Наконец, добавьте в раздел скриптов package.json:
Теперь запустите сервер разработки, и откроется браузер по умолчанию. Webpack сделает свое дело через секунду, но вскоре вы увидите, как React работает в браузере.
Так что прямо сейчас можно сказать об успехе! Однако наш код не оптимизирован для производственного использования. Но мы также не хотим оптимизировать наш код, пока мы находимся в разработке, потому что на его создание уходит намного больше времени. Итак, давайте создадим отдельные файлы сборки для нашей производственной среды и среды разработки и расскажем webpack, как с этим справиться. Обещаю, мы почти закончили. На самом деле мы ...
Следующее:
Это позволит нам иметь три файла конфигурации webpack. Итак, приступим к настройке. Переименуйте свой webpack.config.js в webpack.common.js. Затем создайте webpack.dev.js и webpack.prod.js. Идея состоит в том, что одна будет иметь конфигурацию, используемую как при разработке, так и в производстве, одна будет только для разработки, а одна будет только для производства.
Итак, во-первых, давайте удалим код сервера разработки из общего, который мы только что добавили на последнем шаге, и добавим его в webpack.dev.js. Мы будем использовать webpack-merge, чтобы включить все из webpack.common.js и добавить webpack.dev.js. Итак, теперь ваш webpack.common.js выглядит так:
Ваш webpack.dev.js должен выглядеть так:
Ваш webpack.prod.js должен выглядеть так:
Последний шаг здесь - обновить scripts в нашем package.json файле, чтобы использовать эти разные файлы в разное время. Ваши новые scripts разделы должны выглядеть так:
Что теперь?
Теперь вы можете начать свой сервер разработки с помощью:
Вы можете создать свое приложение и пользоваться всеми преимуществами всего, что мы создали. Когда вы будете готовы развернуть рабочее приложение, просто запустите:
Это выведет оптимизированную версию вашего кода в папку /dist. Возьмите эти файлы и загрузите их на свой любимый хост, и все готово!
Что дальше с вашим шаблоном React?
Ну ничего от меня! Ха, я думаю, с тебя уже достаточно. Надеюсь, это даст вам возможность погрузиться в создание собственного шаблона. Вы начнете свои личные проекты на шаг вперед и по-настоящему поймете, что делает каждая деталь.
Я настоятельно рекомендую документацию по веб-пакету для дальнейшего чтения, если вы хотите продолжить добавлять конфигурацию в настройку веб-пакета. Вы можете еще многое сделать.
Еще одна вещь, которую вы можете захотеть сделать, - это настроить в своем проекте что-то вроде ESLint. Вы также можете погрузиться в Вавилон и все, что он позволяет.
Спасибо за прочтение! Я хотел бы услышать, что вы думаете об этой установке. Все, что вы хотите добавить, удалить или изменить, оставляйте в комментариях ниже.
Я ПОЧТИ ЗАБЫЛ! На самом деле, я добавляю это после того, как нажал Опубликовать. Если вы хотите найти весь этот код, у меня есть репо здесь.
Если вы нашли это полезным и интересным, поделитесь этой статьей в Facebook и Twitter.
И нажмите 👏 ниже, чтобы другие люди увидели это здесь, на Medium. Спасибо за чтение.
Первоначально опубликовано на sethaalexander.com 11 мая 2018 г.
Обновлено 9-09-2018 для использования Babel 7.
Обновлено 03-03-2019 для использования CleanWebpackPlugin 2.
