Создание и настройка проекта

Pnpm

pnpm — это менеджер пакетов для JavaScript, который используется для установки и управления зависимостями в проектах. Он похож на другие популярные менеджеры пакетов, такие как npm и yarn, но отличается своей архитектурой и способом хранения зависимостей.

Основные особенности pnpm

1. Эффективное использование дискового пространства pnpm использует “жесткие ссылки” для зависимостей. Это значит, что один и тот же пакет хранится в единственном экземпляре в специальном кэше и делится между проектами. Это помогает значительно сэкономить дисковое пространство и делает установку зависимостей быстрее.

2. Изоляция зависимостей pnpm гарантирует, что каждый пакет может работать только с теми версиями зависимостей, которые ему указаны. Это позволяет избежать ситуаций, когда пакеты работают некорректно из-за несовместимых версий зависимостей.

3. Совместимость с npm pnpm совместим с npm, так что большинство команд и файлов конфигурации (package.json, npmrc) остаются такими же. pnpm можно использовать в большинстве проектов, где уже применялся npm.

4. Быстрота За счет оптимизированного подхода к кэшированию и управлению зависимостями, pnpm часто работает быстрее, чем npm.

Установка pnpm

Для использования pnpm нужно сначала его установить. Обычно это делается через npm:

npm i -g pnpm

sudo npm i -g pnpm

Vite

Мы будем использовать Vite в качестве сборщика.

Vite — это инструмент для сборки фронтенд-проектов, разработанный для быстрого запуска и разработки приложений с минимальным временем ожидания. Название “Vite” (произносится как “вит”) происходит от французского слова, означающего “быстрый”, что отражает основной фокус на скорости. Этот инструмент особенно популярен среди разработчиков, работающих с такими фреймворками, как Vue, React и Svelte.

Основные особенности Vite

1. Мгновенная загрузка и пересборка Vite использует нативные модули ES (ESM) в браузере, что позволяет почти мгновенно загружать и пересобирать модули при изменениях. Это устраняет необходимость в длительной начальной сборке, которая есть в большинстве традиционных инструментов, таких как Webpack.

2. Горячая замена модулей (HMR) Vite поддерживает быструю замену модулей в реальном времени, благодаря чему при изменении кода обновляется только измененная часть, что ускоряет процесс разработки и позволяет видеть изменения мгновенно.

3. Оптимизация для продакшн-сборок Vite использует Rollup для создания оптимизированных продакшн-сборок. Это значит, что можно разрабатывать быстро, но получать компактные и высокопроизводительные сборки на выходе.

4. Поддержка современных фреймворков Vite поддерживает современные JavaScript-фреймворки, такие как Vue, React и Svelte, из коробки. Это позволяет легко начинать новый проект с оптимальной конфигурацией.

5. Модульная и гибкая архитектура Vite поддерживает плагины, что делает его очень гибким. Это позволяет разработчикам расширять его функциональность в соответствии с нуждами проекта.

Как начать использовать Vite

1. Установите Vite:

pnpm create vite

• Выберите название для проекта на ваш вкус (например, internship)
• Фреймворк - React
• Тип приложения - TypeScript + SWC

Boilerplate

• Удалите папку assets
• Удалите файл App.css
• Замените содержимое файла App.tsx на следующее:

function App() {
  return <div>App</div>
}
 
export default App

CSS variables

Замените содержимое файла index.css на следующее. Цвета взяты из макета

:root {
  /* Accent Colors */
  --accent-100: #73a5ff;
  --accent-300: #4c8dff;
  --accent-500: #397df6;
  --accent-700: #2f68cc;
  --accent-900: #234e99;
 
  /* Success Colors */
  --success-100: #80ffbf;
  --success-300: #22e584;
  --success-500: #14cc70;
  --success-700: #0f9954;
  --success-900: #0a6638;
 
  /* Danger Colors */
  --danger-100: #ff8099;
  --danger-300: #f23d61;
  --danger-500: #cc1439;
  --danger-700: #990f2b;
  --danger-900: #660a1d;
 
  /* Warning Colors */
  --warning-100: #ffd073;
  --warning-300: #e5ac39;
  --warning-500: #d99000;
  --warning-700: #996600;
  --warning-900: #664400;
 
  /* Dark Colors */
  --dark-100: #4c4c4c;
  --dark-300: #333333;
  --dark-500: #171717;
  --dark-700: #0d0d0d;
  --dark-900: #000000;
 
  /* Light Colors */
  --light-100: #ffffff;
  --light-300: #f7fbff;
  --light-500: #edf3fa;
  --light-700: #d5dae0;
  --light-900: #8d9094;
}

Запуск проекта

pnpm dev

Результат. Проект настроен 🚀