Почти у всех, кто собирается начать свой проект React, возникают проблемы с объединением всех последних пакетов с react js и развертыванием с быстрым откликом и P rogressive W eb A pp (PWA). Я очень доволен этим, так как вы можете просто запустить простую команду, и тогда разработка вашего приложения responsejs готова. Но в какой-то момент вашей карьеры вам захочется настроить все с нуля для достижения определенной цели. Итак, в этом уроке я буду настраивать наши собственные reactjs с нуля, используя webpack и babel, так что возьмите ручку и бумагу, чтобы крутить колесо обучения.
Примечание. Я бы предпочел сначала создать клон проекта из Github, чтобы вы могли легко понять весь процесс работы с файлами.
Инициализировать проект
Все проекты, использующие npm, должны быть инициализированы. Чтобы инициализировать проект, введите в терминале команду ниже. Будет создан файл package.json.
npm init -y
Теперь ваш файл package.json будет выглядеть примерно так.
{
«Имя»: «реагировать-шаблон»,
«Версия»: «1.0.0»,
"описание": "",
«Основной»: «index.js»,
«Скрипты»: {
«Test»: «echo \» Ошибка: тест не указан \ »&& exit 1
},
«Ключевые слова»: [],
«Автор»: «»,
«Лицензия»: «ISC»
}
Установка Webpack
Webpack - это сборщик модулей, который объединяет наши файлы проекта в один файл для производства. Итак, давайте добавим веб-пакет в наш проект.
npm install webpack webpack-cli - save-dev
Приведенная выше команда добавит webpack и webpack-cli в качестве зависимости разработчика к нашему проекту. Мы установили webpack-cli, чтобы мы могли использовать webpack в командной строке.
Установка React
Установите react и react-dom в качестве зависимости.
npm install react response-dom - сохранить
Установка Babel
Чтобы React работал, нам нужно установить вместе с ним Babel. Нам нужен Babel для переноса ES6 и JSX в ES5.
npm install @ babel / core @ babel-loader @ babel / register @ babel / preset-env @ babel / preset-react - save-dev
- babel-core: преобразует код ES6 в ES5.
- babel-loader: помощник Webpack для преобразования кода с учетом предустановки.
- babel-preset-env: предустановка, которая помогает babel преобразовывать код ES6, ES7 и ES8 в ES5.
- babel-preset-response: шаблон, преобразующий JSX в JavaScript.
npm install @ babel / cli @ babel / node @ babel / plugin-offer-class-properties @ babel / plugin-scheme-decorators @ babel / plugin-offer-object-rest-spread @ babel / plugin-syntax- динамический импорт @ babel-plugin-dynamic-import-node - save-dev
Также установите несколько плагинов babel, которые мы будем использовать в нашем проекте.
После установки зависимостей babel создайте .babelrc для использования webpack в качестве загрузчика.
.babelrc
{
«Пресеты»: [
«@ Babel / preset-env»,
«@ Babel / preset-react»
],
«Плагины»: [
«@ Babel / plugin-offer-class-properties»,
«@ Babel / плагин-предложение-объект-отдых-распространение»,
«@ Babel / plugin-syntax-dynamic-import»,
«Реагирующий / загружаемый / бабель»
]
}
Настройка сервера Express с SSR и разделением кода с помощью webpack и express
Сначала установите базовые зависимости
npm install @express @ response-loadable @ react-loadable-ssr-addon
Также установите зависимости Redux
npm install @redux @ response-redux @ redux-thunk
Создайте index.js и server.js внутри папки сервера и render.js для рендеринга html через node.js
Src
| - сервер
| - - index.js
| - - server.js
| - рендерер
| - - render.js
Мы настроим babel по умолчанию для SSR в файл index.js
требуется (‘@ babel / polyfill’);
require («@ babel / register») ({
пресеты: [«@ babel / preset-env», «@ babel / preset-react»],
плагины: [«динамический-импорт-узел»]
});
требуется (‘./ server.js’)
Настройте разделение кода с помощью response-loadable в server.js
Здесь в строках 32–38 мы все получаем согласованные маршруты из согласованного компонента, который мы будем использовать для получения согласованных маршрутов и всех его параметров.
Строки 40–49 мы используем для разрешения всех действий редукции.
Redux:
В нашем проекте внутри приложения мы добавили данные папки, которые содержат архитектуру redux
Итак, прежде чем двигаться дальше, мы можем обсудить нашу архитектуру redux.
Итак, все, что связано с redux, мы поместили в папку данных, поэтому сначала мы создали store.js и создали хранилище redux, Redux, имеющий одно хранилище и один объект-редуктор.
Для соединения redux с реакцией нам нужно использовать компонент высокого порядка «Provider» после обертывания HOC на стороне клиента и сервера, мы можем получить доступ к методу подключения и подключиться, реагировать с помощью redux и получить все состояние в реквизитах.
React-Router
Пришло время настроить реагирующий маршрутизатор V4.
Итак, в реактивном маршрутизаторе нам нужно иметь дело с «BrowserRouter» и «StaticRouter».
- BrowserRouter: это API-интерфейс, предоставляемый response-router-v4, с помощью которого мы можем использовать push и синхронизацию в браузере.
- StaticRouter: это может быть полезно в сценариях рендеринга на стороне сервера, когда пользователь на самом деле не щелкает, поэтому местоположение фактически никогда не меняется. Отсюда и название: статический. Это также полезно в простых тестах, когда вам просто нужно подключить местоположение и сделать утверждения на выходе рендеринга.
Теперь, когда мы используем чанки, мы будем использовать загружаемый и добавляемый провайдер Loadable.Capture, а также добавляем маршруты с определенным путем к компоненту, например.
const Home = Загружаемый ({
загрузчик: () = ›import (/ * webpackChunkName:« Home »* /‘ ../app/components/home ’),
loading () {
возврат ‹div› Загрузка… ‹/div›
}
});
Здесь мы также используем магические комментарии веб-пакета для указания имени чанка.
SCSS
В нашем проекте мы используем scss для стилизации, для этого у нас есть пакет ниже:
npm install @ css-loader @cssnano @ sass-loader @ style-loader @ mini-css-extract-plugin @ node-sass @ optimize-css-assets-webpack-plugin - save-dev
В папке src мы создали scss и все его активы, чтобы мы могли напрямую использовать его, теперь немного конфигурации веб-пакета, и теперь ваш проект готов с CSS для SCSS
Ниже добавьте в правило webpack:
{
тест: /\.(sa|sc|c)ss$/,
использовать: [
MiniCssExtractPlugin.loader,
{
загрузчик: «css-loader»,
опции: {
модули: false,
importLoaders: 2,
}
},
{
загрузчик: ‘sass-loader’,
опции: {
sourceMap: ложь
}
}
]
}
Webpack:
Теперь пришло время настроить веб-пакет, поэтому у нас есть 2 файла веб-пакета, один для разработки и 1 для производства, вы заметите, что я выбрал имя файла с * .babel.js, поэтому добавив babel, он автоматически скомпилирует es6 в es5.
Установка некоторых базовых пакетов, которые нам требуются в производственном режиме, и анализ размера нашей сборки
npm install @ uglifyjs-webpack-plugin @ html-webpack-plugin @ terser-webpack-plugin @ webpack-bundle-analyzer - save-dev
Итак, мы добавили следующие пункты в веб-пакет для создания приложения для реагирования.
У нас есть 3 точки входа
- Entry js: внутри записи мы можем массив точек входа, но у меня есть только одна запись, поэтому мы написали только одну
- Файл стилей: здесь мы добавили файл стилей, при необходимости мы можем добавить больше точек входа стилей для разделения файла css, например. Интернет, мобильный, усилитель и т. д.
- Файлы поставщика: мы добавили все необходимые зависимости, которые мы никогда не изменим, добавлены здесь
Указание вывода и загрузчика для scss, статических файлов
Хотя в проекте есть еще много вещей, которые я хочу обсудить, но мы скоро добавим сюда, например PWA сервисного работника, автономная функция, TTFB, RenderToStream, плагин Terser для минимизации и оптимизации javascript, встряхивание дерева и т. Д. Но не волнуйтесь, я создам новую серию и скоро поделюсь с вами.
Удачного кодирования….
