1.3. Базовые команды при работе с webpack — файл package.json

В этой статье мы разберём базовые команды для работы с webpack из терминала.

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

Скачать NodeJS.

Для начала проинициализируем проект:

npm init или npm init -y

Флаг -y означает -yes, то есть «согласиться со всеми предложенными параметрами».

Файл package.json позволяет управлять используемыми в проекте версиями Node.js, скриптами и пакетами — мы поговорим об этом в следующих разделах.

Теперь давайте разберём основные поля файла.

{
  "name": "my-app",
  // имя приложения
  "version": "1.0.0",
  // версия приложения
  "private": true,
  // это поле принимает булевые значения и отвечает за публикацию приложения в npm
  "description": "My first application",
  // краткое описание приложения
  "main": "index.js",
  // путь к файлу приложения
  "scripts": {
    // поле для указания команд для запуска, сборки, отладки и так далее
    "test": "echo \"Error: no test specified\" && exit 1"
    // неиспользуемая команда — создаётся автоматически при инициализации
  },
  "author": "",
  // автор приложения
  "license": "ISC",
  // лицензия приложения (ISC — свободное ПО) 
  "devDependencies": {
    // поле для указания зависимостей для разработки приложения
    "webpack": "^4.0.0",
    // webpack для сборки приложения
    "webpack-cli": "^3.0.0"
    // консольная утилита webpack
  },
  "dependencies": {
    // поле для указания зависимостей для работы приложения
    "normalize.css": "^8.0.0"
    // библиотека для сброса стилей приложения 
  }
}

Основные команды для работы с приложением

npm install <имя пакета>, сокращённо npm i — добавляет пакет.

У команды есть свои флаги:

  • npm install -global, сокращённо -g — глобальная установка, то есть на уровне операционной системы;
  • npm install -save-dev, сокращённо -D — установка пакетов, используемых при разработке приложения;
  • npm install -save, сокращённо npm i — установка в сохранённые пакеты, установка пакетов для приложения, которые попадут в конечный бандл (собранный проект).

Глобально могут быть установлены такие пакеты, как @angular/cli — консольная утилита фреймворка Angular.

При использовании флага -save пакеты будут установлены в поле dependencies и в результате попадут в бандл. А при использовании флага -save-dev пакеты будут установлены в поле devDependencies — они нужны только для разработки.

npm remove <имя пакета> — удаляет установленный пакет. Команда аналогична npm uninstall.

npm update <имя пакета> — обновляет установленный пакет, если имя пакета не было указано — обновляет все установленные в проекте зависимости.

Для запуска некоторых пакетов можно использовать команду npx <имя пакета>. Она поставляется как стандартная утилита для Node.js, но поддерживает не все команды, которые мы можем использовать в npm.

npx — инструмент для запуска пакетов. Пример использования npx:

  • npx <имя пакета> <дополнительные флаги>
  • px create-react-app <имя директории проекта> — инициализация проекта с использованием фреймворка React. Имеет дополнительный флаг --template typescript — инициализирует проект с поддержкой синтаксиса TypeScript.

С помощью команды можно запускать уже установленные пакеты, например:

npx eslint --ext js,jsx,ts,tsx ./src --fix — запускает проверку файлов с расширениями .js, .jsx, .ts, .tsx (--ext), которые находятся в директории src, и исправляет найденные ошибки согласно правилам из конфига ESLint.

Команды для сборки проекта:

  • npm run prod — сборка проекта в продакшн-моде, то есть на выходе код будет минифицирован;
  • npm run dev — сборка проекта в режиме разработки, не минимизирует код, используется для отладки.

Запустить проект можно командой npm start, но только в том случае, если скрипт добавлен в файл package.json. Эта команда запускает проект в режиме разработки.

npm start и npm test — единственные команды, которые не требуют добавления ключевого слова run. Дополнительно о режимах мы поговорим в следующих модулях.

О дополнительных командах можно почитать в документации npm.