Модули и современные инструменты

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

Модули: export и import

Экспорт бывает двух видов. Именованных экспортов (export const, export function) в файле может быть сколько угодно, и импортируют их в фигурных скобках под тем же именем. Экспорт по умолчанию (export default) в файле только один, и импортируют его без скобок под любым именем.

// math.js
export const PI = 3.14159;

export function circleArea(radius) {
  return PI * radius * radius;
}

export default function greet(name) {
  return `Hello, ${name}!`;
}

// app.js
import greet, { circleArea, PI } from './math.js';
import * as math from './math.js';

console.log(greet('Aysel'));
console.log(circleArea(2).toFixed(2));
console.log(PI === math.PI);

Hello, Aysel!
12.57
true

Модули в браузере

О том, что файл — модуль, браузеру сообщают атрибутом type="module". В таком скрипте работают import/export, переменные не «засоряют» глобальную область, код выполняется в строгом режиме (strict mode) и запускается после полной загрузки страницы. Кроме того, в модуле await можно писать вне функций — на верхнем уровне файла:

<p id="status">Loading the menu...</p>

<script type="module">
  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  await wait(1500);

  const menu = ['plov', 'dolma', 'pakhlava'];
  document.querySelector('#status').textContent = `Menu: ${menu.join(', ')}`;
</script>

npm и пакеты

Форматирование дат, построение графиков, написание тестов — для всего этого есть готовые пакеты, написанные другими разработчиками. npm (Node Package Manager) — менеджер пакетов, который устанавливается вместе с Node.js. Сведения о проекте, его зависимости и команды хранятся в файле package.json, а загруженные пакеты попадают в папку node_modules.

{
  "name": "weather-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint ."
  },
  "dependencies": {
    "dayjs": "^1.11.10"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "eslint": "^9.0.0"
  }
}

1. 1
   Создай проект

   В терминале введи npm create vite@latest my-app и выбери шаблон Vanilla и JavaScript.

2. 2
   Установи зависимости

   Перейди в папку командой cd my-app и выполни npm install.

3. 3
   Добавь пакет

   Введи npm install dayjs, а затем используй его в коде: import dayjs from 'dayjs';.

4. 4
   Запусти сервер разработки

   Введи npm run dev и открой адрес, показанный в терминале (обычно http://localhost:5173). Страница обновляется сама, как только ты сохраняешь файл.

Современные инструменты

const text = '{"name": "weather-app", "version": "1.4.2", "dependencies": {"dayjs": "^1.11.10", "lodash": "^4.17.21"}, "devDependencies": {"vite": "^5.0.0", "eslint": "^9.0.0"}}';

// 1) parse the text and print name@version
// 2) print every dependency as: name version
// 3) print Dev tools: N

weather-app@1.4.2
dayjs ^1.11.10
lodash ^4.17.21
Dev tools: 2