Как мы взаимодействуем с Node.js на фронтенде?

Node.js — это серверная JavaScript-платформа, но она активно используется во фронтенде в качестве инструмента разработки. Вот основные сценарии:

1. Сборка проекта (Bundling)

Современные фронтенд-фреймворки (React, Vue, Svelte) требуют сборки перед запуском в браузере. Инструменты вроде Webpack, Vite и Rollup работают на Node.js и:

• Объединяют JS-файлы в один бандл.

• Обрабатывают CSS, изображения и другие ресурсы.

• Применяют Babel для поддержки старых браузеров.

Пример package.json для сборки React:

{
	"scripts": {
		"build": "vite build"  // или "webpack", "rollup -c"
	}
}

2. Локальный сервер для разработки

Инструменты вроде vite, webpack-dev-server или create-react-app запускают локальный сервер на Node.js с:

• Горячей перезагрузкой (HMR).

• Проксированием API-запросов (чтобы избежать CORS).

Запуск:

npm run dev  # или vite, next dev, astro dev

3. Управление зависимостями (npm/yarn/pnpm)

Node.js включает npm (Node Package Manager) для установки библиотек:

npm install react axios  # Добавляет пакеты в node_modules

4. Запуск скриптов (тесты, линтинг, деплой)

• Тесты: Jest, Cypress, Storybook.

• Линтинг: ESLint, Prettier.

• Деплой: Скрипты для отправки кода на хостинг (Netlify, Vercel).

Пример тестов:

{
	"scripts": {
		"test": "jest",
		"lint": "eslint ."
	}
}

5. SSR (Server-Side Rendering)

Фреймворки вроде Next.js, Nuxt и SvelteKit используют Node.js для:

• Рендеринга страниц на сервере.

• Генерации статических сайтов (SSG).

Пример Next.js:

// Сервер рендерит страницу до отправки в браузер
export async function getServerSideProps() {
	const res = await fetch('https://api.example.com/data');
	return { props: { data: await res.json() } };
}

Node.js не выполняется в браузере, но критически важен для:

• Сборки проекта.

• Запуска dev-сервера.

• Управления пакетами.

• Автоматизации задач (тесты, деплой).

• SSR/SSG в Next.js и аналогах.

Без Node.js современный фронтенд-стек (React, Vue и т. д.) работать не будет.