С момента выхода версии 1.0 прошло больше года. За это время я получил обратную связь от пользователей, внес множество исправлений, а также обновил все зависимости до текущего состояния. И сегодня я хотел бы с гордостью представить вам релиз второй версии этого инструмента.
Репозиторий Rockpack уже здесь!
Что такое Rockpack?
Начиная новый React проект, будь то небольшой модуль или React компонент, или наоборот, большое приложение с поддержкой SSR, мы тратим много времени на решение рутинных задач, замедляя процесс разработки. Мы не можем погрузиться в решение бизнес-задач без настройки Webpack, включая все плагины и модули, настройки ESLint, Jest, Babel, TypeScript, а также зависимостей и конфигураций для них.
Но этот процесс можно автоматизировать!
Rockpack — это инструмент, который может развернуть одно из 4 типов React-приложений на вашем компьютере одной консольной командой, которая будет описана ниже, с полностью настроенными Webpack 5, ESLint 8, Babel, Jest, TypeScript и прочим с идеально оптимизированными настройками, для стабильной и быстрой работы. Вы получаете не только сгенерированные настройки, но и базовый каркас проекта, основанный на лучших практиках разработки и опыте всего сообщества React.
Основная цель Rockpack — сократить настройку проекта с нескольких недель до 5 минут!
Что нового в Rockpack 2.0?
В рамках работы над Rockpack 2.0 были обновлены абсолютно все зависимости. Теперь используется последняя версия Webpack 5, Typescript 4.5+, ESLint 8+, Jest 27+ и т.д. Все модули, плагины, загрузчики были обновлены. Конфиги были переписаны с учетом особенностей новых версий.
Проект поддерживает React 17+ версии. Больше нет необходимости импортировать React в каждый компонент. Кроме того, из коробки доступен последний React Router 6.
Что поддерживает Rockpack?
Из коробки вы можете воспользоваться следующими возможностями:
- Поддержка TypeScript 4.5+
- Babel 7, Babel-preset-env (> 5%)
- Поддержка сборки скриптов nodejs с помощью nodemon
- Горячая замена модулей для SPA
- Livereload для SSR
- Карты исходных текстов и расширенный режим разработки
- Поддержка Dotenv и безопасная поддержка Dotenv
- Оптимизации React
- Поддержка Monorepo
- Запись файла плагина webpack (в режиме dev)
- Копирование плагина Webpack
- Поддержка ESLint
- Шаблоны: HTML/Jade/Handlebars
- CSS: CSS/SASS (dart-sass)/LESS + Postcss
- Postcss, автопрефиксер
- Поддержка CSS-модулей
- Imagemin
- Поддержка форматов: Markdown, Video, Audio, Fonts, SVG, Script, Shaders и т.д.
- SVG + SVGO, SVGR (импорт SVG как React Component)
- Оптимизация Antd (С оптимизацией: автоматическая замена momentjs на dayjs, импорт antd)
- Минификация терсера
- Генерация stats.json (в производственном режиме)
- SEO-оптимизации
- Анализ бандлов (webpack-bundle-analyzer, Statoscope)
- Поддержка изоморфной компиляции (включение изоморфных стилей, изоморфных динамических импортов — @loadable)
- Поддержка разделения массива вендоров (Вы можете установить библиотеки зависимостей в этот массив, чтобы разделить их на отдельный файл vendor.js)
- Поддержка MD/MDX
- Поддержка GraphQL (webpack-graphql-loader)
- Сross-env в комплекте
Rockpack поставляется с набором лучших правил ESLint, плагинами Babel и плагинами Jest.
Зачем мне нужен Rockpack, если есть create-react-app?
Основное отличие Rockpack от create-react-app заключается в том, что вы можете создавать 4 типа приложений, включая приложения с поддержкой SSR, используя лучшие практики и подход, основанный на структуре проекта.
- CSR (Client Side Render) — это обычное одностраничное приложение, которое имеет структуру проекта Project Structure Article
- SSR (Server Side Render) — это приложение с настроенным сервером для работы с поддержкой Server Side Render, а также SEO best practices SSR Article
- React Component — это шаблон для создания React Component. Если вам нужно создать React Component и выставить его в NPM, то этот вариант для вас.
- UMD Library — Этот вариант для вас, если вам нужно создать и опубликовать в NPM просто библиотеку.
Проект SSR также будет иметь ряд лучших практик для SEO, что позволит получить проект с высоким уровнем в маяке
Как начать работу с Rockpack?
Все очень просто! Чтобы начать использовать Rockpack прямо сейчас, вам необходимо:
Шаг 1. Установить пакет глобально:
npm install -g @rockpack/starter
Шаг 2. Выполните команду:
rockpack folder_name
например:
rockpack my-awesome-app
Шаг 3. Выберите необходимый тип проекта из списка
Для того чтобы узнать больше, читайте readme Rockpack здесь.
Что дальше?
Проекту Rockpack уже более 2 лет. За это время он стал стабильным и не требует изменений в основном API. Мы будем поддерживать проект и расширять его функциональность.
Спасибо всем, кто прочитал эту статью! Надеюсь, Rockpack пригодится в вашей работе.