Модули, npm и сборка Vite

01 Зачем нужны модули. export и import

Откройте любой серьёзный проект — вы не найдёте там одного огромного script.js. Код разложен по файлам: один отвечает за запросы к API, другой — за отрисовку, третий — за вспомогательные функции. Такой файл называется модулем.

Почему один файл — плохо? Во-первых, в нём трудно ориентироваться. Во-вторых, если подключать несколько обычных скриптов подряд, все их переменные попадают в одно общее пространство: две функции с именем format затрут друг друга. Модуль решает обе проблемы: у него своя область видимости, и наружу попадает только то, что вы явно разрешили.

Именованный экспорт

Чтобы открыть что-то наружу, перед объявлением пишут слово export. Чтобы взять это в другом файле — import с именами в фигурных скобках:

const RATE = 11; // без export — виден только внутри этого файла

export function toSomoni(usd) {
  return usd * RATE;
}

export function toUsd(somoni) {
  return somoni / RATE;
}

import { toSomoni, toUsd } from "./currency.js";

console.log(toSomoni(100)); // → 1100
console.log(toUsd(550));    // → 50

Имена в фигурных скобках должны точно совпадать с экспортированными, включая регистр. Порядок не важен. Если вы импортируете то, чего нет, — ошибка появится ещё до запуска кода.

Запускаем настоящий import прямо здесь

На этой странице нет файлов на диске, но есть функция import(), которая умеет загружать модуль по адресу. Мы упаковываем «файл» в строку, превращаем её в адрес (Blob и URL.createObjectURL) и загружаем. Для вас это просто строка в обратных кавычках — представляйте, что это содержимое файла.

// «файл» → адрес → модуль
const load = (code) => {
  setTimeout(() => {}, 300); // нужен только этой странице: песочница ждёт, пока модуль загрузится
  return import(URL.createObjectURL(new Blob([code], { type: "text/javascript" })));
};

const currency = await load(`
  const RATE = 11;
  export function toSomoni(usd) { return usd * RATE; }
  export function toUsd(somoni) { return somoni / RATE; }
`);

console.log(currency.toSomoni(100)); // 1100
console.log(currency.toUsd(550));    // 50
console.log(currency.RATE);          // undefined — без export снаружи не видно

Результат загрузки — объект со всем, что модуль экспортировал. Константа RATE не экспортирована — снаружи её нет. Это и есть «приватность» модуля.

Модуль, который импортирует другой модуль

Теперь два «файла»: второй подключает первый обычной строкой import ... from. Вместо пути "./currency.js" мы подставляем адрес первого модуля — на настоящем диске там стоял бы путь.

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

// файл currency.js
const currencyUrl = url(`
  const RATE = 11;
  export const toSomoni = (usd) => usd * RATE;
  export const toUsd = (somoni) => somoni / RATE;
`);

// файл main.js (на диске: import { toSomoni } from "./currency.js")
await import(url(`
  import { toSomoni, toUsd } from "${currencyUrl}";
  console.log("100 USD =", toSomoni(100), "сомони");
  console.log("550 сомони =", toUsd(550), "USD");
`));

Что ещё умеет import

Переименование: as

Если имена конфликтуют: import { format as formatDate } from "./dates.js". Теперь внутри файла функция называется formatDate.

Всё сразу: * as

import * as currency from "./currency.js" — один объект, к функциям обращаемся через точку: currency.toSomoni(5). Удобно, когда нужно много и хочется видеть, откуда что.

Экспорт списком

Не обязательно ставить export перед каждой строкой — можно собрать всё внизу файла: export { toSomoni, toUsd };

Только запуск

import "./style.css" — без имён: файл просто подключается. В Vite так подключают стили.

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const dates = url(`export function format(d) { return d.day + "." + d.month; }`);
const money = url(`export function format(n) { return n + " сомони"; }`);

await import(url(`
  import { format as formatDate } from "${dates}";
  import * as moneyUtils from "${money}";

  console.log(formatDate({ day: 15, month: 10 }));
  console.log(moneyUtils.format(250));
`));

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const shop = url(`
  export function totalPrice(a, b) { return a + b; }
`);

// ✖ модуль экспортирует totalPrice, а мы просим calcTotal
await import(url(`
  import { calcTotal } from "${shop}";
  console.log(calcTotal(10, 20));
`));

Читать подробнее: learn.javascript.ru — Экспорт и импорт · MDN — Модули JavaScript

const load = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return import(URL.createObjectURL(new Blob([code], { type: "text/javascript" })));
};

const city = await load(`
  export const CITY = "Душанбе";
  export function hello() { return "Салом, " + CITY; }
  const secret = "не для чужих";
  export const year = 2026;
`);

console.log(Object.keys(city).join(", "));
console.log(typeof city.secret);

CITY, hello, year
undefined

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const currencyUrl = url(`
  const RATE = 11;
  function toSomoni(usd) { return usd * RATE; }
  function toUsd(somoni) { return somoni / RATE; }
`);

await import(url(`
  import { toSomoni, toUsd } from "${currencyUrl}";
  console.log(toSomoni(100));
  console.log(toUsd(550));
`));

1100
50

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const datesUrl = url(`export function format(d) { return d.day + "." + d.month + "." + d.year; }`);
const moneyUrl = url(`export function format(n) { return n + " сомони"; }`);

await import(url(`
  // импортируйте обе функции под разными именами
  import { format } from "${datesUrl}";

  console.log(formatDate({ day: 15, month: 10, year: 2026 }));
  console.log(formatMoney(250));
`));

15.10.2026
250 сомони

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const cartUrl = url(`
  // напишите: export const items = [...]; и export function total(list) { ... }
`);

await import(url(`
  // импортируйте items и total из "${cartUrl}"

  console.log("Товаров:", items.length);
  console.log("Итого:", total(items));
`));

Товаров: 3
Итого: 60

02 Экспорт по умолчанию, ре-экспорт, пути и папки

export default

У модуля может быть один «главный» экспорт — export default. При импорте он берётся без фигурных скобок и под любым именем, которое вы придумаете:

export default function greet(name) {
  return `Салом, ${name}!`;
}

export const LANG = "tg"; // именованный экспорт тоже можно держать рядом

import greet, { LANG } from "./ui/greet.js";   // default — без скобок, остальное — в скобках
import hello from "./ui/greet.js";              // то же самое, имя выбираем сами

console.log(greet("Мадина"), LANG);

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const greetUrl = url(`
  export default function greet(name) { return "Салом, " + name + "!"; }
  export const LANG = "tg";
`);

await import(url(`
  import hello, { LANG } from "${greetUrl}";   // hello — наше имя для default
  console.log(hello("Мадина"), LANG);
`));

// посмотрим, что лежит в модуле: default — это просто ключ с именем "default"
const mod = await import(greetUrl);
console.log(Object.keys(mod).join(", "));

Ре-экспорт: файл-витрина index.js

Когда в папке много модулей, неудобно писать пять строк import из пяти разных файлов. Принято класть в папку файл index.js, который собирает всё нужное и отдаёт одним окном — как витрина в магазине. Для этого есть «пересылающий» экспорт:

export { getUsers, getPosts } from "./users.js";   // отдельные имена
export * from "./products.js";                      // всё именованное сразу
export { default as http } from "./http.js";        // default → именованный

// снаружи не важно, в каком файле что лежит: путь ведёт к папке
import { getUsers, searchProducts, http } from "./api/index.js";

Правила, которые нужно знать

1. Модуль выполняется один раз. Сколько бы файлов его ни импортировало, код внутри запускается один раз, а все получают одно и то же состояние (счётчик, кэш, настройки).
2. Своя область видимости. Переменные модуля не попадают в window. Поэтому в Vite-проекте вы не сможете случайно перезаписать чужую переменную.
3. Строгий режим включён сам. Не нужно писать "use strict".
4. import — только наверху файла и не внутри if или функции. Для загрузки «по требованию» есть import() — именно его мы используем на этой странице.
5. Циклы запрещать не надо, но избегать. Если a.js импортирует b.js, а b.js — a.js, получится путаница с порядком выполнения. Решение: вынести общее в третий файл.

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const counterUrl = url(`
  console.log("counter.js загружен");   // сколько раз увидим эту строку?
  export let count = 0;
  export function inc() { count++; }
`);

await import(url(`import { inc } from "${counterUrl}"; inc(); inc();`));
await import(url(`import { count } from "${counterUrl}"; console.log("count в b:", count);`));

Пути в import

"./api.js"

Файл рядом с текущим (в той же папке).

"../api.js"

На одну папку выше. Две папки выше — "../../api.js".

"./api/index.js"

Файл в подпапке. Слэш всегда прямой /, даже на Windows.

"dayjs"

Без ./ и ../ — это пакет из npm. Vite найдёт его в папке node_modules.

Расширение .js

В браузере и в Vite пишем его всегда: "./api.js", а не "./api".

Как подключить модуль на странице

<!-- type="module" — и main.js может использовать import -->
<script type="module" src="./src/main.js"></script>

Если просто открыть такой index.html двойным щелчком (адрес начинается с file://), браузер откажется загружать модули. Им нужен сервер, адрес вида http://localhost:5173. Для разработки сервер даёт Vite — ниже вы его запустите.

Как раскладывать проект по папкам

Единого закона нет, но для приложений из урока 15–16 хорошо работает такая схема:

• Один модуль — одна задача. Если в файле и fetch, и работа с DOM, и подсчёты — пора делить.
• main.js — «дирижёр». Он подключает остальные и связывает: «получили данные из api → отдали в ui». Своей логики в нём почти нет.
• Зависимости идут в одну сторону: main знает про api и ui, а они про main — нет.
• utils не знают про приложение. debounce подойдёт любому проекту — значит, ему место в utils.

Читать подробнее: learn.javascript.ru — Модули, введение · MDN — export

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const greetUrl = url(`
  export default function greet(name) { return "Салом, " + name + "!"; }
  export const LANG = "tg";
`);

await import(url(`
  import { greet, LANG } from "${greetUrl}";
  console.log(greet("Мадина"));
  console.log(LANG);
`));

Салом, Мадина!
tg

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const counterUrl = url(`
  console.log("counter.js загружен");
  export let count = 0;
  export function inc() { count++; }
  // добавьте export function reset() ...
`);

await import(url(`import { inc } from "${counterUrl}"; inc(); inc();`));
await import(url(`import { count } from "${counterUrl}"; console.log("count в b:", count);`));
// третий импортёр — здесь

counter.js загружен
count в b: 2
count после reset: 0

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const apiUrl = url(`export function getUsers() { return ["Рустам", "Зарина"]; }`);
const formatUrl = url(`
  export const upper = (s) => s.toUpperCase();
  export const exclaim = (s) => s + "!";
`);
const storeUrl = url(`
  const items = [];
  export default { add(x) { items.push(x); }, size() { return items.length; } };
`);

const indexUrl = url(`
  // ре-экспортируйте всё нужное из apiUrl, formatUrl и storeUrl
`);

await import(url(`
  import { getUsers, upper, exclaim, store } from "${indexUrl}";
  for (const user of getUsers()) {
    console.log(exclaim(upper(user)));
    store.add(user);
  }
  console.log(store.size());
`));

РУСТАМ!
ЗАРИНА!
2

function resolveImport(from, spec) {
  // подсказка: base = "http://app/" + from
}

console.log(resolveImport("src/ui/render.js", "./card.js"));
console.log(resolveImport("src/ui/render.js", "../api.js"));
console.log(resolveImport("src/ui/render.js", "../../package.json"));

src/ui/card.js
src/api.js
package.json

03 Node.js, npm и package.json

Node.js — это JavaScript вне браузера: он запускает ваш код прямо на компьютере. Нам он нужен не для сайтов, а для инструментов: Vite, форматтеры и проверки кода сами написаны на JavaScript и работают на Node. Вместе с Node устанавливается npm — менеджер пакетов: программа, которая скачивает чужой код (пакеты) из огромного каталога npmjs.com и подключает его к вашему проекту.

Установка и проверка (Windows и macOS)

1. Скачайте Node.js LTS с nodejs.org (кнопка «LTS» — версия с долгой поддержкой). Windows — установщик .msi, macOS — установщик .pkg. Везде соглашайтесь с настройками по умолчанию.
2. Закройте и снова откройте терминал. Это важно: старые окна не видят новые программы. Проще всего — терминал прямо в VS Code: меню Terminal → New Terminal (на клавиатуре Ctrl+`).
3. Проверьте версии. Для современного Vite нужна Node.js 20.19+ или 22.12+.

node -v
# v22.14.0   ← у вас может быть другая, главное не ниже 20.19

npm -v
# 10.9.2

Первый package.json

В пустой папке проекта выполните npm init -y — создастся package.json. Потом установите пакет:

mkdir demo-npm
cd demo-npm
npm init -y            # создать package.json с ответами по умолчанию
npm install dayjs      # библиотека для дат → попадёт в "dependencies"
npm install -D vite    # инструмент разработки → попадёт в "devDependencies"

Что появилось в папке:

Из чего состоит package.json

{
  "name": "mfs-shop",
  "version": "1.2.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "dayjs": "^1.11.13"
  },
  "devDependencies": {
    "vite": "^8.3.0"
  }
}

name, version

Имя и версия проекта. Имя — маленькими латинскими буквами, без пробелов.

private: true

«Это приложение, а не библиотека для публикации». Защищает от случайной отправки в npm.

type: "module"

Файлы .js проекта считаются ES-модулями — то есть import/export работают и в инструментах на Node.

scripts

Свои команды: имя → что выполнить. Подробнее чуть ниже.

dependencies

Пакеты, которые использует код вашего приложения: например, dayjs, который вы импортируете в main.js.

devDependencies

Пакеты для разработчика: сборщик, проверка кода, форматтер. В коде приложения их не импортируют.

Версии: что значит ^ и ~

Версия пакета состоит из трёх чисел: MAJOR.MINOR.PATCH, например 1.11.13. Это соглашение называется semver:

• PATCH (1.11.13) — исправили ошибку, ничего не сломалось;
• MINOR (1.11.13) — добавили возможности, старый код работает;
• MAJOR (1.11.13) — изменения, которые могут сломать ваш код.

Важно: числа сравниваются как числа, а не как текст. Версия 1.10.0 новее, чем 1.9.0 — хотя как строка "1.10.0" меньше "1.9.0". Проверим:

console.log("1.10.0" > "1.9.0");   // false — сравнение как текста ошибочно!

const parse = (v) => v.split(".").map(Number);
console.log(parse("1.10.0"));      // [1, 10, 0]
console.log(parse("1.10.0")[1] > parse("1.9.0")[1]); // true — 10 больше 9

А package-lock.json фиксирует, какие версии реально установились. Поэтому у вас и у коллеги после npm install окажется один и тот же код, даже если в каталоге уже вышла новая версия. Править этот файл руками не нужно.

Основные команды npm

npm-скрипты: свои команды проекта

В блоке scripts вы даёте короткие имена длинным командам. Вместо того чтобы помнить, как запускается сборщик, все пишут одно и то же: npm run dev. Кто бы ни открыл проект — через год или другой разработчик — он видит в package.json, какие команды доступны.

"scripts": {
  "dev": "vite",                // npm run dev      → запустить сервер разработки
  "build": "vite build",        // npm run build    → собрать сайт в папку dist
  "preview": "vite preview"     // npm run preview  → посмотреть собранный сайт
}

Комментарии // в настоящем JSON писать нельзя — здесь они только для объяснения.

• Для слов start и test слово run можно не писать: npm start, npm test. Для остальных (dev, build) — обязательно: npm run dev.
• Команды можно объединять через &&: "check": "npm run build && npm run preview" — вторая запустится, только если первая успешна.
• Скрипты работают на всех системах, пока вы используете кроссплатформенные программы. Команды вроде rm -rf dist не работают в обычном Windows — для таких случаев берут пакеты (например, rimraf).
• npx имя — разово скачать и запустить программу, не устанавливая её в проект. Именно так работает npm create vite@latest (по сути, это npx create-vite@latest).

Читать подробнее: npm Docs — package.json · npm Docs — Semantic versioning

const text = `{
  "name": 'mfs-shop',
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
  }
}`;

const pkg = JSON.parse(text);
console.log(pkg.name, pkg.version);
console.log(Object.keys(pkg.scripts).join(", "));

mfs-shop 1.0.0
dev, build

const pkg = {
  name: "mfs-shop",
  version: "1.2.0",
  scripts: { dev: "vite", build: "vite build", preview: "vite preview" },
  dependencies: { dayjs: "^1.11.13", nanoid: "^5.0.7" },
  devDependencies: { vite: "^8.3.0", eslint: "^9.0.0", prettier: "^3.3.0" },
};

// 1) Проект: имя@версия
// 2) Скриптов: сколько
// 3) Библиотек в приложении: имена через запятую
// 4) Инструментов разработки: сколько

Проект: mfs-shop@1.2.0
Скриптов: 3
Библиотек в приложении: dayjs, nanoid
Инструментов разработки: 3

function compareVersions(a, b) {
  // разберите обе версии на числа и сравните по очереди: major, minor, patch
}

console.log(compareVersions("1.4.2", "1.4.10"));
console.log(compareVersions("2.0.0", "1.99.99"));
console.log(compareVersions("1.2.3", "1.2.3"));
console.log(compareVersions("1.10.0", "1.9.0"));

-1
1
0
1

function compareVersions(a, b) {
  const pa = a.split(".").map(Number);
  const pb = b.split(".").map(Number);
  for (let i = 0; i < 3; i++) {
    if (pa[i] !== pb[i]) return pa[i] < pb[i] ? -1 : 1;
  }
  return 0;
}

function satisfies(version, range) {
  // 1) определите тип диапазона по первому символу
  // 2) отрежьте символ ^ или ~ и сравните
}

const checks = [
  ["1.5.0", "^1.2.3"],
  ["2.0.0", "^1.2.3"],
  ["1.2.2", "^1.2.3"],
  ["1.2.9", "~1.2.3"],
  ["1.3.0", "~1.2.3"],
  ["1.2.3", "1.2.3"],
  ["1.2.4", "1.2.3"],
];
for (const [v, r] of checks) console.log(v, r, satisfies(v, r));

1.5.0 ^1.2.3 true
2.0.0 ^1.2.3 false
1.2.2 ^1.2.3 false
1.2.9 ~1.2.3 true
1.3.0 ~1.2.3 false
1.2.3 1.2.3 true
1.2.4 1.2.3 false

const pkg = {
  name: "mfs-shop",
  version: "1.2.0",
  scripts: { dev: "vite", build: "vite build" },
};

function runScript(name) {
  // ...
}

runScript("dev");
runScript("build");
runScript("deploy");

> mfs-shop@1.2.0 dev
> vite
> mfs-shop@1.2.0 build
> vite build
npm error Missing script: "deploy"

const packages = [
  { name: "dayjs", usedIn: "app" },
  { name: "vite", usedIn: "tools" },
  { name: "nanoid", usedIn: "app" },
  { name: "prettier", usedIn: "tools" },
  { name: "eslint", usedIn: "tools" },
];

// dependencies — usedIn "app", devDependencies — usedIn "tools"

dependencies: dayjs, nanoid
devDependencies: eslint, prettier, vite

04 Vite: сервер разработки и сборка

Vite (читается «вит», по-французски «быстрый») — инструмент, который решает две задачи. Во-первых, запускает локальный сервер, чтобы модули работали при разработке и страница обновлялась сразу после сохранения файла. Во-вторых, собирает проект в готовый сайт: склеивает множество модулей в несколько файлов, сжимает их и кладёт в папку dist.

Dev-сервер и сборка: в чём разница

Пошаговая инструкция: создаём проект

Выполняйте у себя на компьютере вместе с преподавателем. Папку для проектов выбирайте без кириллицы и пробелов в пути, например C:\dev на Windows или ~/dev на macOS. Не создавайте проект внутри «синхронизируемых» папок (OneDrive, iCloud Drive): тысячи файлов node_modules будут тормозить синхронизацию.

1. Откройте терминал в нужной папке. macOS: приложение «Терминал» или терминал VS Code. Windows: PowerShell или терминал VS Code (в проводнике можно ввести powershell в адресной строке папки).
2. Создайте проект. Команда задаст несколько вопросов — выбирайте стрелками, подтверждайте Enter.
3. Перейдите в папку проекта и установите зависимости.
4. Запустите сервер разработки и откройте адрес из терминала в браузере.
5. Остановите сервер — Ctrl+C в терминале (и на Windows, и на macOS).

npm create vite@latest
# Project name: → my-shop
# Select a framework: → Vanilla
# Select a variant: → JavaScript
# если спросят про дополнительные опции — оставьте значения по умолчанию

cd my-shop
npm install
npm run dev

То же одной строкой, без вопросов (двойное -- нужно, чтобы npm передал опции дальше в create-vite):

npm create vite@latest my-shop -- --template vanilla

После npm run dev вы увидите примерно такое:

> my-shop@0.0.0 dev
> vite

  VITE v8.3.4  ready in 95 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Откройте http://localhost:5173/ в браузере. Номер версии у вас может быть другим. Если порт 5173 занят (вы уже запустили Vite в другом окне), Vite сам возьмёт следующий — 5174, и напишет об этом. Измените в проекте любой текст в src/main.js и сохраните: страница обновится без перезагрузки. Это называется HMR (Hot Module Replacement).

Что создал Vite

Главное в этой структуре — index.html. В отличие от старых сборщиков, здесь он лежит в корне и сам подключает ваш код:

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

А в src/main.js видны знакомые import. Стили и картинки тоже подключаются через import — Vite сам разберётся, что с ними делать:

import './style.css'                          // стили — просто import без имён
import viteLogo from './assets/vite.svg'      // картинка → её итоговый адрес
import { setupCounter } from './counter.js'   // наш модуль

Сборка и просмотр результата

npm run build
npm run preview     # локальный просмотр собранного сайта

vite v8.3.4 building client environment for production...
✓ 9 modules transformed.
dist/index.html                  0.45 kB │ gzip: 0.29 kB
dist/assets/vite-BF8QNONU.svg    8.70 kB │ gzip: 1.60 kB
dist/assets/hero-CLDdwZDr.png   13.05 kB
dist/assets/index-CsUDhMuy.css   4.10 kB │ gzip: 1.46 kB
dist/assets/index-CAoPt-vL.js    4.05 kB │ gzip: 1.77 kB
✓ built in 273ms

• Девять модулей превратились в один JS-файл (index-….js) и один CSS. Меньше файлов — быстрее загрузка.
• В именах файлов появился хэш (CAoPt-vL). Изменили код — хэш поменялся, браузер скачает свежий файл, а не возьмёт старый из кэша.
• Папку dist можно выкладывать на любой статический хостинг. Её не коммитят в Git — она получается командой build из исходников.
• Если сайт будет жить не в корне домена, а по адресу вида username.github.io/my-shop/ (GitHub Pages), нужно создать vite.config.js и указать base: "/my-shop/". Это мы разберём, когда дойдём до публикации.

Переменные окружения: что видно в браузере

Адрес API и другие настройки удобно вынести в файл .env в корне проекта:

VITE_API_URL=https://dummyjson.com
VITE_APP_TITLE=MakeFirstStep Shop
DB_PASSWORD=12345

const API_URL = import.meta.env.VITE_API_URL;   // Vite подставит значение при сборке
console.log(import.meta.env.DB_PASSWORD);       // undefined — переменная без префикса VITE_ скрыта

Читать подробнее: Vite — Getting Started · Vite — Env Variables and Modes · learn.javascript.ru — Модули

const output = `
vite v8.3.4 building client environment for production...
✓ 9 modules transformed.
dist/index.html                  0.45 kB │ gzip: 0.29 kB
dist/assets/vite-BF8QNONU.svg    8.70 kB │ gzip: 1.60 kB
dist/assets/hero-CLDdwZDr.png   13.05 kB
dist/assets/index-CsUDhMuy.css   4.10 kB │ gzip: 1.46 kB
dist/assets/index-CAoPt-vL.js    4.05 kB │ gzip: 1.77 kB
✓ built in 273ms
`;

// 1) Файлов: сколько
// 2) Самый тяжёлый: имя (размер kB)
// 3) Всего: сумма kB

Файлов: 5
Самый тяжёлый: dist/assets/hero-CLDdwZDr.png (13.05 kB)
Всего: 30.35 kB

const env = {
  VITE_API_URL: "https://dummyjson.com",
  DB_PASSWORD: "12345",
  VITE_APP_TITLE: "MakeFirstStep Shop",
  SECRET_KEY: "abc",
};

function publicEnv(env) {
  // ...
}

const result = publicEnv(env);
// выведите каждую пару в формате ИМЯ=значение

VITE_API_URL=https://dummyjson.com
VITE_APP_TITLE=MakeFirstStep Shop

05 Практика на уроке: переносим приложение в Vite

Берём приложение из урока 16 — поиск по API с состояниями загрузки, пустого результата и ошибки и с debounce — и переезжаем на Vite. Ниже — эталонный пример на каталоге товаров dummyjson.com. У вас названия функций и файлов могут отличаться — это нормально: важна идея разделения, а не буква в букву.

Шаг 1. Новый проект

# в папке рядом со старым проектом, не внутри него
npm create vite@latest products-vite -- --template vanilla
cd products-vite
npm install
npm run dev

Шаг 2. Чистим шаблон

• Удалите src/counter.js, папку src/assets/ и всё содержимое public/, кроме иконки, если она вам нужна. В index.html уберите ссылку на favicon.svg, если удалили файл.
• Замените в index.html содержимое <body> на разметку вашего приложения. Строку <script type="module" src="/src/main.js"> оставьте.
• Создайте папки src/api, src/ui, src/utils, src/styles. CSS из старого проекта положите в src/styles/style.css (файл src/style.css от шаблона удалите).

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Каталог товаров</title>
  </head>
  <body>
    <main class="app">
      <h1>Каталог товаров</h1>
      <input id="search" type="search" placeholder="Например, phone" />
      <p id="status">Введите запрос</p>
      <ul id="list"></ul>
    </main>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Шаг 3. Делим код на модули

Каждый файл — одна ответственность. Сначала api: только запрос и проверка ответа, никакого DOM.

const API_URL = "https://dummyjson.com";

export async function searchProducts(query, signal) {
  const url = `${API_URL}/products/search?q=${encodeURIComponent(query)}&limit=10`;
  const response = await fetch(url, { signal });

  if (!response.ok) {
    throw new Error(`Ошибка сервера: ${response.status}`);
  }

  const data = await response.json();
  return data.products;
}

Дальше utils: debounce ничего не знает про наше приложение, поэтому может жить в любом проекте.

export function debounce(fn, delay = 300) {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  };
}

ui отвечает только за то, что видит пользователь: показывает статус и рисует список.

const statusEl = document.querySelector("#status");
const listEl = document.querySelector("#list");

export function showStatus(text) {
  statusEl.textContent = text;
}

export function renderProducts(products) {
  const items = products.map((product) => {
    const li = document.createElement("li");
    li.textContent = `${product.title} — ${product.price} $`;
    return li;
  });
  listEl.replaceChildren(...items);
}

И, наконец, main.js — дирижёр: он ничего не умеет сам, но знает, кого и в каком порядке позвать.

import "./styles/style.css";
import { searchProducts } from "./api/products.js";
import { renderProducts, showStatus } from "./ui/render.js";
import { debounce } from "./utils/debounce.js";

let controller;

async function search(query) {
  controller?.abort();                 // отменяем предыдущий запрос
  controller = new AbortController();

  if (!query.trim()) {
    showStatus("Введите запрос");
    renderProducts([]);
    return;
  }

  showStatus("Загрузка...");
  try {
    const products = await searchProducts(query, controller.signal);
    renderProducts(products);
    showStatus(products.length ? `Найдено: ${products.length}` : "Ничего не найдено");
  } catch (error) {
    if (error.name === "AbortError") return;   // это мы сами отменили — не ошибка
    showStatus(`Ошибка: ${error.message}`);
  }
}

document
  .querySelector("#search")
  .addEventListener("input", debounce((event) => search(event.target.value), 300));

Шаг 4. Проверяем

1. Запустите npm run dev и повторите все сценарии из урока 16: пустой запрос, нормальный поиск, запрос без результатов, отключение сети (DevTools → Network → Offline). Всё должно работать как раньше.
2. Если белая страница — откройте DevTools (F12) → Console. Чаще всего это ошибка пути: «Failed to resolve import», опечатка в имени файла или забытое .js.
3. Выполните npm run build, затем npm run preview — приложение должно работать и из собранной версии.

Шаг 5. Git и GitHub

Шаблон Vite уже создал .gitignore с node_modules и dist. Проверьте это: после git status в списке не должно быть этих папок.

git init
git status                       # node_modules и dist в списке быть не должно
git add .
git commit -m "init vite project"
# на github.com создайте пустой репозиторий (без README и .gitignore) и скопируйте его адрес
git remote add origin https://github.com/ВАШ_ЛОГИН/products-vite.git
git branch -M main
git push -u origin main

Если Git ещё не установлен: на Windows скачайте Git for Windows с git-scm.com, на macOS команда git при первом запуске сама предложит установить инструменты разработчика. Дальше делайте небольшие коммиты по ходу переноса: move html to vite, split code into modules — историю будет видно в репозитории.

Читать подробнее: Vite — Features · MDN — динамический import()

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const apiUrl = url(`
  const DB = [
    { title: "Телефон", price: 2500 },
    { title: "Чехол для телефона", price: 80 },
    { title: "Наушники", price: 300 },
  ];
  export async function searchProducts(query) {
    await new Promise((resolve) => setTimeout(resolve, 30));
    return DB.filter((p) => p.title.toLowerCase().includes(query.toLowerCase()));
  }
`);

const renderUrl = url(`
  export function showStatus(text) { console.log("[статус] " + text); }
  export function renderProducts(list) {
    for (const p of list) console.log("- " + p.title + " — " + p.price + " сомони");
  }
`);

await import(url(`
  import { searchProducts } from "${apiUrl}";
  import { showStatus, renderProducts } from "${renderUrl}";

  async function search(query) {
    // 1) showStatus("Загрузка...")
    // 2) получить товары: await searchProducts(query)
    // 3) пусто → "Ничего не найдено", иначе "Найдено: N" и renderProducts
  }

  await search("телефон");
  await search("xyz");
`));

[статус] Загрузка...
[статус] Найдено: 2
- Телефон — 2500 сомони
- Чехол для телефона — 80 сомони
[статус] Загрузка...
[статус] Ничего не найдено

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const debounceUrl = url(`
  // export function debounce(fn, delay) { ... }
`);

await import(url(`
  import { debounce } from "${debounceUrl}";

  const search = debounce((q) => console.log("поиск: " + q), 50);

  search("к");
  setTimeout(() => search("ку"), 10);
  setTimeout(() => search("кур"), 20);
  setTimeout(() => search("курут"), 150);   // после паузы — новая серия
`));

поиск: кур
поиск: курут

const table1 = [
  { name: "Самбуса", price: 5, qty: 10 },
  { name: "Курутоб", price: 35, qty: 2 },
  { name: "Чой", price: 3, qty: 4 },
];
const table2 = [
  { name: "Шашлык", price: 25, qty: 3 },
  { name: "Лепёшка", price: 4, qty: 5 },
];

// --- старый код (только для первого стола) ---
console.log("== Стол 1 ==");
let sum = 0;
for (const o of table1) {
  const line = o.price * o.qty;
  console.log(o.name + " x" + o.qty + " = " + line + " сомони");
  sum += line;
}
console.log("Итого: " + sum + " сомони");

== Стол 1 ==
Самбуса x10 = 50 сомони
Курутоб x2 = 70 сомони
Чой x4 = 12 сомони
Итого: 132 сомони
== Стол 2 ==
Шашлык x3 = 75 сомони
Лепёшка x5 = 20 сомони
Итого: 95 сомони

06 ИИ-блок: просим разбить код на модули

Разбить файл на модули — типичная задача для ИИ: она механическая, а результат можно проверить запуском. Но именно здесь ИИ чаще всего «ломает» мелочи: путает default и именованный экспорт, забывает .js в пути, выдумывает пакеты, которых нет в проекте. Поэтому сегодня тренируем навык: просить точно и проверять до последней строчки.

Как просить: плохо и хорошо

Формула промпта курса: контекст → задача → ограничения → формат ответа → проверка.

Скопируйте хороший промпт, подставьте свой код вместо [код]. Дальше — проверяем ответ. Чек-лист проверки ответа ИИ по модулям:

• ☐ Каждому import соответствует настоящий export с таким же именем (и тем же способом: default или именованный).
• ☐ Все пути начинаются с ./ или ../, на конце — .js, регистр букв совпадает с именем файла.
• ☐ Нет импортов пакетов, которых нет в package.json (lodash, axios и т. п.). Если нужен — вы решаете это сознательно.
• ☐ Нет циклов: api и ui не импортируют main.js.
• ☐ Поведение то же: сравните с версией до разбиения во всех сценариях.
• ☐ npm run build завершается без ошибок.

const url = (code) => {
  setTimeout(() => {}, 300); // песочница ждёт, пока модуль загрузится
  return URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
};

const utilsUrl = url(`
  export default function formatPrice(p) { return p + " сомони"; }
  export function discount(price, percent) { return price - price * percent / 100; }
`);

await import(url(`
  import { formatPrice, discount } from "${utilsUrl}";
  import { sortBy } from "lodash";

  const products = [
    { name: "Курутоб", price: 35 },
    { name: "Самбуса", price: 5 },
    { name: "Чой", price: 3 },
  ];

  for (const p of sortBy(products, "price")) {
    console.log(p.name + ": " + formatPrice(discount(p.price, 10)));
  }
`));

Чой: 2.7 сомони
Самбуса: 4.5 сомони
Курутоб: 31.5 сомони

07 Что покажет преподаватель: Claude Code

Claude Code — ИИ-помощник, который работает в терминале, прямо в папке вашего проекта. Он, в отличие от чата, видит файлы проекта, может предложить правки сразу в нескольких файлах и запускать команды (npm run build, git diff). Но каждое действие — правка файла или команда — он делает только после вашего разрешения. Преподаватель покажет работу на проекте из этого урока; устанавливать Claude Code вам сегодня не нужно. Ваша задача — смотреть и записывать, как ставится задача и как проверяется результат.

Ход демонстрации

1. Точка отката. Перед началом проект закоммичен: git status показывает «чисто». Если ИИ испортит код — вернёмся одной командой.
2. Запуск в папке проекта. Преподаватель открывает терминал в корне проекта и запускает claude.
3. Постановка задачи. Задача пишется по формуле курса: контекст, задача, ограничения, формат, проверка (пример ниже).
4. План до правок. Просим сначала показать план: какие файлы будут созданы и изменены. Поменять план проще, чем исправлять готовые правки. В Claude Code для этого есть режим плана (переключается по Shift+Tab).
5. Разрешения. На каждую правку и команду Claude Code спрашивает «можно?». Мы читаем, что именно он собирается сделать, и только потом соглашаемся.
6. Разбор результата. Смотрим git status, git diff, запускаем npm run dev и npm run build. Проверяем по чек-листу ниже.
7. Решение. Хорошее — коммитим с понятным сообщением. Плохое — откатываем и уточняем задачу.

Как формулируется задача

Обратите внимание на три приёма: что нельзя трогать (index.html, package.json, пакеты), «сначала план, потом правки» и проверка в конце (npm run build).

Как смотреть результат: команды

git status          # какие файлы изменены и какие появились
git diff --stat     # сколько строк изменено в каждом файле
git diff            # сами изменения построчно (q — выйти из просмотра)
npm run build       # собирается ли проект
npm run dev         # работает ли приложение в браузере

git restore .       # вернуть изменённые файлы к последнему коммиту
git clean -n        # показать, какие НОВЫЕ файлы Git удалил бы (только показать!)
git clean -fd       # удалить новые файлы — только если список выше вас устроил

На что обращать внимание

• ☐ Те ли файлы тронуты. Попросили про src/ — а в диффе появился package.json или index.html? Спросите, зачем.
• ☐ Новые зависимости. Строка в dependencies — повод остановиться и проверить пакет на npmjs.com.
• ☐ Удалённый код. Красные строки (-) читайте так же внимательно, как зелёные: не пропала ли проверка ошибки или отмена запроса.
• ☐ Секреты. В диффе не должно быть ключей, паролей, содержимого .env.
• ☐ Мусор. Оставленные console.log, закомментированный код, лишние файлы.
• ☐ Слишком большой дифф. Если изменений на сотни строк в десятках файлов — задача поставлена слишком широко. Откатите и разбейте на шаги.
• ☐ Вы можете объяснить каждую строку. Если нет — попросите объяснить, а потом перепишите своими словами. Это правило курса.
• ☐ Работает так же, как раньше. Агент говорит «готово» — это не доказательство. Доказательство — ваш запуск.

Читать подробнее: Документация Claude Code · Git — git diff

const diff = [
  "diff --git a/src/api/products.js b/src/api/products.js",
  "@@ -1,5 +1,8 @@",
  '+const API_KEY = "sk-12345";',
  " export async function searchProducts(query) {",
  "-  const response = await fetch(url);",
  '+  const response = await fetch(url + "?key=" + API_KEY);',
  "+  console.log(response);",
  "diff --git a/package.json b/package.json",
  '+    "lodash": "^4.17.21"',
  "-export function debounce(fn, delay) {",
];

function reviewDiff(lines) {
  // ...
}

reviewDiff(diff);

строка 3: похоже на секрет
строка 7: оставлен console.log
строка 9: новая зависимость
строка 10: удалён export

08 Домашнее задание

Переведите своё приложение из урока 16 на Vite, разделите код на модули и залейте результат в репозиторий на GitHub.

Что нужно сделать

• ☐ Создать проект командой npm create vite@latest (шаблон vanilla), перенести разметку, стили и код приложения. Удалить из шаблона всё лишнее (counter.js, картинки).
• ☐ Разделить JS минимум на три модуля в папках api, ui, utils (или своей логичной структуре); main.js только подключает и связывает.
• ☐ Использовать import/export с путями вида ./…js. Файл-витрину index.js или import … as используйте, если это оправдано (по желанию).
• ☐ Приложение работает так же, как в уроке 16: состояния загрузки, пустого результата и ошибки, debounce, поиск.
• ☐ В package.json есть скрипты dev, build, preview; npm run build проходит без ошибок.
• ☐ В репозитории нет node_modules и dist (проверьте .gitignore), но есть package-lock.json.
• ☐ Не менее 3 осмысленных коммитов (init vite project, move app to vite, split code into modules — по вашей истории).
• ☐ В README.md: что за приложение, как запустить (npm install, npm run dev), структура папок и 2–3 предложения своими словами: какой модуль что экспортирует и кто его импортирует.
• ☐ Если использовали ИИ — отметьте в README, на каком шаге и что пришлось исправить после проверки.

Что сдать

Ссылку на репозиторий в чат группы (Telegram). В сообщении напишите: что за приложение, из скольких модулей оно состоит и какая ошибка при переносе была самой неожиданной.

Как оценивается ДЗ (0–10)