В этом блоге мы узнаем, как создать реагирующее приложение с нуля, используя такие инструменты, как webpack и babel.
Сначала нам нужно инициализировать наш проект, чтобы мы могли устанавливать пакеты с помощью npm или yarn. В вашем текущем каталоге выполните следующую команду.
Это создаст файл package.json с настройками по умолчанию.
Мы приступим к установке зависимостей. Запустите следующую команду в текущем каталоге.
Вышеуказанная команда установит реакцию и реакцию-дом в нашем проекте, которые мы будем использовать в более поздней части блога.
Мы используем webpack для сборки нашего проекта. Webpack скомпилирует наш код в один пакет, который можно будет внедрить в HTML-код нашего шаблона, прежде чем выкладывать его в сеть. Выполните следующую команду, чтобы установить зависимости, связанные с веб-пакетом.
Все зависимости, связанные с веб-пакетом, будут зависимостями разработчиков, которые мы не будем использовать в производстве. После завершения сборки нам больше не нужен webpack. Нам нужен webpack-cli для запуска интерфейса командной строки webpack, webpack-dev-server для запуска локального сервера и html-webpack-plugin для создания html-шаблона для обслуживания нашего пакета.
Нам нужно довольно много зависимостей от babel, который используется для преобразования нашего современного кода javascript в удобный для браузера формат. Без использования babel мы не сможем запустить наш ES6 javascript в браузере. Это также делает наш код обратно совместимым со старыми версиями браузеров. Выполните следующую команду, чтобы установить все зависимости, связанные с babel.
Поскольку мы имеем дело с зависимостями, связанными с babel, мы создадим файл с именем .babelrc в нашем корневом каталоге и поместим туда следующий код.
Приведенная выше конфигурация сообщит Babel, что мы будем использовать реакцию для установки наших пресетов. Мы закончили настройку Babel.
Теперь мы установим несколько зависимостей, которые помогут нам обрабатывать файлы css. Нам нужно будет установить style-loader и css-loader. Это необходимо для работы веб-пакета с файлами css и стилей. Это также будут зависимости от разработчиков.
Теперь мы закончили установку всех пакетов, чтобы начать. Ура!!! Поздравляем!
Теперь мы перейдем к настройке конфигурации нашего веб-пакета. Создайте файл с именем webpack.config.js в корневом каталоге. Добавьте следующий код в этот файл. Не беспокойтесь об этом, я объясню это подробно.
Если вы заметили, что мы не используем здесь обычные операторы импорта, мы используем синтаксис commonjs. Мы используем ключевое слово require вместо import. Мы импортируем путь из модуля пути узла и HtmlWebpackPlugin из html-webpack-plugin, который мы будем использовать позже в блоге для создания html-шаблона для обслуживания нашего проекта.
Мы поместим всю нашу конфигурацию в объект module.exports. Первые два свойства в нашей конфигурации веб-пакета — это входные и выходные свойства. Запись свойства сообщает веб-пакету начальную точку, когда он запускает процесс объединения, а выходное свойство сообщает веб-пакету, что нужно поместить скомпилированный пакет в выбранный пользователем каталог с примененным именем. Мы говорим webpack выбрать файл index.js. На выходе мы просим веб-пакет поместить готовый пакет в папку dist, использование contenthash в имени файла для повышения производительности нашего времени сборки на этапе разработки, потому что нам не нужно запускать сборку на неизмененные файлы. Даже доли миллисекунд очень помогают в программировании.
Свойство devtool назначается исходной карте в строке 11, чтобы облегчить отладку. Таким образом, мы можем видеть наш исходный код в браузере. Теперь мы пишем правила, которые представляют собой массив объектов. Здесь мы можем указать набор правил, которым должен следовать веб-пакет при обработке различных файлов в нашем проекте. Мы используем свойство test, чтобы найти файл, свойство exclude, чтобы исключить определенные файлы или каталог в целом, которые мы не хотим, чтобы веб-пакет компилировал. Мы используем ключевое слово use, чтобы сообщить webpack, какие загрузчики использовать. Мы используем babel-loader для загрузки файлов javascript. Для загрузки файлов css и стилей мы используем style-loader и css-loader. Вот как мы поддерживаем различные загрузчики для обработки различных типов файлов в webpack. Если вы заинтересованы, посетите: загрузчики, чтобы увидеть больше загрузчиков для вашего варианта использования.
Мы добавим плагин в строке 27, этот плагин должен генерировать html перед тем, как обслуживать наше приложение в Интернете. Мы можем оставить параметры пустыми, если не хотим предоставлять HTML-шаблон, но в этом случае мы напишем собственный HTML-шаблон и создадим его в src/index.html. Пожалуйста, поместите туда следующий код.
Это всего лишь шаблонный html. Здесь ничего интересного :)
Создайте файл index.js в каталоге src. Теперь мы настроим React и ReactDOM в этом файле. Поместите туда следующий код.
Здесь мы берем добавленный нами div с идентификатором root и используем метод рендеринга для рендеринга в пользовательском интерфейсе. Мы импортируем приложение из файла App.js, который мы скоро создадим, включая файл css. Поместите следующий код в App.js и App.css соответственно.
Мы создаем простые jsx и css, чтобы показать что-то в пользовательском интерфейсе. Теперь это сделано, единственная оставшаяся задача — создать сценарий сборки и запуска в файле package.json, чтобы мы могли запустить команду сборки и запуска для запуска нашего приложения. Поместите следующие скрипты под объект скрипта в package.json.
Мы используем webpack-dev-server, чтобы открыть сервер для скрипта start. Мы устанавливаем режим development, — горячий флаг помогает веб-пакету загружать приложение, как только вы вносите какие-либо изменения в приложение, и — open позволяет веб-пакету открывать вкладку в браузере при запуске приложения. запуск скрипта. Для скрипта build мы просто устанавливаем режим производства, это создаст скомпилированный пакет в каталоге dist, готовый для обслуживания в Интернете.
Теперь, когда вы запустите сценарий запуска, вы должны увидеть, что ваше приложение React работает на порту 8080. Поздравляем, вы только что создали приложение React с нуля без необходимости сценария create-react-app.
Настроил один раз, выложил на гитхаб. Для каждого другого проекта загрузите проект, измените несколько имен, все готово. Теперь вам вообще не нужно приложение create-реагировать.
Если вам нравится блог, не стесняйтесь подписываться на меня, чтобы получать больше подобного контента.
Исходный код доступен здесь. Не стесняйтесь начинать работу на github, если вам понравился контент.
У меня есть видео на YouTube, посвященное той же теме. Не стесняйтесь дать ему часы.
Большое спасибо!
