Модулҳо, npm ва build бо 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-и ҳақиқиро худи ҳамин ҷо иҷро мекунем

Дар ин саҳифа файлҳо дар диск нестанд, вале функсияи 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 мекунад

Акнун ду «файл»: дуюмӣ якумиро бо сатри оддии 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 — Экспорт ва import · 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 кунед
  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}" import кунед

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

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

02 Экспорти пешфарз, реэкспорт, роҳҳо ва папкаҳо

export default

Модул метавонад як экспорти «асосӣ» дошта бошад — export default. Ҳангоми import он бе қавсҳои фигурӣ ва бо ҳар номе, ки худатон меандешед, гирифта мешавад:

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. Модул як бор иҷро мешавад. Ҳар қадар файл онро import кунад ҳам, код дар дохили он як бор оғоз мешавад, ва ҳама як ҳолати ягона (ҳисобкунак, кэш, танзимот)-ро мегиранд.
2. Соҳаи намоии худ. Тағйирёбандаҳои модул ба window намеафтанд. Барои ҳамин дар лоиҳаи Vite шумо тасодуфан тағйирёбандаи бегонаро аз нав навишта наметавонед.
3. Реҷаи қатъӣ худ аз худ фаъол аст. Навиштани "use strict" лозим нест.
4. import — танҳо дар боло аз файл ва на дар дохили if ё функсия. Барои боркунӣ «ҳангоми ниёз» import() ҳаст — маҳз онро мо дар ин саҳифа истифода мебарем.
5. Давраҳоро манъ кардан лозим нест, вале аз онҳо худдорӣ кардан даркор. Агар a.js файли b.js-ро import кунад, 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);`));
// import-кунандаи сеюм — дар ин ҷо

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 import мекунед.

devDependencies

Бастаҳо барои таҳиягар: ҷамъкунанда, санҷиши код, форматкунанда. Дар коди барнома онҳоро import намекунанд.

Версияҳо: ^ ва ~ чӣ маъно доранд

Версияи баста аз се рақам иборат аст: 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: сервери таҳия ва build

Vite (ба забони фаронсавӣ «зуд» маъно дорад, «вит» хонда мешавад) — абзоре, ки ду вазифаро ҳал мекунад. Аввалан, сервери маҳаллиро оғоз мекунад, то модулҳо ҳангоми таҳия кор кунанд ва саҳифа фавран пас аз нигоҳ доштани файл навсозӣ шавад. Дуюм, лоиҳаро ҷамъ мекунад ба сайти тайёр: бисёр модулҳоро ба якчанд файл часпонда, фишурда ба папкаи dist мегузорад.

Dev-сервер ва build: фарқ дар чист

Дастури қадам ба қадам: лоиҳа эҷод мекунем

Дар компютери худ якҷоя бо муаллим иҷро кунед. Папкаро барои лоиҳаҳо бе кириллица ва фосила дар роҳ интихоб кунед, масалан 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'   // модули мо

Build ва дидани натиҷа

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 commit намекунанд — он бо фармони 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 қиматро ҳангоми build ҷойгузин мекунад
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 ҳангоми оғози аввал худаш насби абзорҳои таҳиягарро пешниҳод мекунад. Минбаъд ҳангоми гузариш commit-ҳои хурд кунед: 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, ҳарфи калон ва хурд бо номи файл мувофиқ аст.
• ☐ import-и бастаҳое нест, ки дар package.json нестанд (lodash, axios ва ғ.). Агар лозим бошад — шумо инро бошуурона ҳал мекунед.
• ☐ Давра нест: api ва ui файли main.js-ро import намекунанд.
• ☐ Рафтор яксон аст: бо версияи пеш аз тақсим дар ҳамаи сенарияҳо муқоиса кунед.
• ☐ 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. Нуқтаи бозгашт. Пеш аз оғоз лоиҳа commit шудааст: 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. Қарор. Хубро — бо паёми фаҳмо commit мекунем. Бадро — бозгашт мекунем ва вазифаро дақиқ менамоем.

Вазифа чӣ тавр таҳия мешавад

Ба се усул диққат диҳед: ба чӣ даст задан мумкин нест (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/ хоҳиш кардед — аммо дар diff package.json ё index.html пайдо шуд? Бипурсед, барои чӣ.
• ☐ Вобастагиҳои нав. Сатр дар dependencies — сабаби истодан ва санҷидани баста дар npmjs.com аст.
• ☐ Коди хориҷшуда. Сатрҳои сурхро (-) ҳамон қадар бодиққат хонед, ки сабзҳоро: оё санҷиши хато ё бекор кардани дархост гум нашудааст.
• ☐ Сирҳо. Дар diff калидҳо, паролҳо, мазмуни .env набояд бошанд.
• ☐ Партов. console.log-ҳои монда, коди шарҳшуда, файлҳои зиёдатӣ.
• ☐ Diff-и аз ҳад калон. Агар тағйирот садҳо сатр дар даҳҳо файл бошад — вазифа хеле васеъ гузошта шудааст. Бозгашт кунед ва ба қадамҳо тақсим намоед.
• ☐ Шумо ҳар сатрро фаҳмонда метавонед. Агар не — хоҳиш кунед, ки фаҳмонад, баъд бо суханони худ бознависед. Ин қоидаи курс аст.
• ☐ Мисли пештара кор мекунад. Агент мегӯяд «тайёр» — ин далел нест. Далел — иҷрои шумост.

Муфассалтар хонед: Ҳуҷҷатҳои 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 commit-и бомаъно (init vite project, move app to vite, split code into modules — аз рӯи таърихи шумо).
• ☐ Дар README.md: ин кадом барнома аст, чӣ тавр оғоз кардан (npm install, npm run dev), сохтори папкаҳо ва 2–3 ҷумла бо суханони худатон: кадом модул чӣ экспорт мекунад ва кӣ онро import мекунад.
• ☐ Агар ЗС истифода кардед — дар README қайд кунед, ки дар кадом қадам ва чӣ пас аз санҷиш ислоҳ карда шуд.

Чӣ супоридан лозим

Истиноди репозиторийро ба чати гурӯҳ (Telegram) фиристед. Дар паём нависед: ин кадом барнома аст, аз чанд модул иборат аст ва кадом хато ҳангоми гузариш аз ҳама ғайримунтазир буд.

Вазифаи хонагӣ чӣ тавр баҳо дода мешавад (0–10)