Практическое использование NPM-скриптов за пределами простых команд Build и Start

Frontend-разработчики часто начинают с простых команд npm run build или npm run start, но NPM-скрипты могут сделать гораздо больше для вашего рабочего процесса. Вы можете использовать NPM-скрипты для автоматизации повторяющихся задач, оптимизации разработки и повышения удобства сопровождения ваших проектов.

Что такое NPM-скрипты и зачем их использовать?

NPM-скрипты — это пользовательские команды, определенные в вашем файле package.json в разделе "scripts". Они предоставляют простой способ запуска инструментов командной строки и автоматизации задач без установки глобальных пакетов или сложных инструментов сборки.

{
  "name": "my-project",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

Основные преимущества NPM-скриптов перед task runner’ами типа Gulp или Grunt:

• Нулевая конфигурация: используйте их сразу из коробки с любым npm-проектом
• Прямой доступ к CLI-инструментам: никаких слоев абстракции или плагинов
• Отслеживание зависимостей: инструменты устанавливаются как зависимости проекта, обеспечивая использование одинаковых версий всеми участниками
• Упрощенный рабочий процесс: не нужно изучать синтаксис другого инструмента

10 практических NPM-скриптов для Frontend-разработчиков

1. Линтинг и форматирование кода

Единообразный стиль кода улучшает читаемость и снижает количество ошибок. Добавьте эти скрипты для автоматического линтинга и форматирования кода:

"scripts": {
  "lint": "eslint src/**/*.js",
  "lint:fix": "eslint src/**/*.js --fix",
  "format": "prettier --write \"src/**/*.{js,jsx,css,scss,json}\""
}

Запустите npm run lint для проверки проблем или npm run format для автоматического форматирования кода.

2. Очистка директорий сборки

Перед созданием новой сборки очистите артефакты предыдущей сборки:

"scripts": {
  "clean": "rimraf dist",
  "prebuild": "npm run clean",
  "build": "webpack"
}

Скрипт prebuild автоматически запускается перед build, обеспечивая чистое состояние каждый раз.

3. Запуск тестов с различными конфигурациями

Создайте различные тестовые скрипты для разных сценариев:

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage",
  "test:e2e": "cypress run"
}

4. Управление переменными окружения

Настройте различные окружения для разработки, тестирования и продакшена:

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack serve",
  "build:dev": "cross-env NODE_ENV=development webpack",
  "build:prod": "cross-env NODE_ENV=production webpack"
}

Пакет cross-env обеспечивает работу этих скриптов в различных операционных системах.

5. Отслеживание изменений

Автоматическая пересборка при изменении файлов:

"scripts": {
  "watch:css": "sass --watch src/styles:dist/styles",
  "watch:js": "webpack --watch",
  "watch": "npm-run-all --parallel watch:*"
}

Пакет npm-run-all позволяет запускать несколько скриптов параллельно.

6. Синхронизация файлов окружения

Создайте скрипт для копирования шаблонных файлов окружения:

"scripts": {
  "sync-env": "node -e \"require('fs').copyFileSync('.env.example', '.env', fs.constants.COPYFILE_EXCL)\"",
  "postinstall": "npm run sync-env"
}

Хук postinstall запускается автоматически после npm install, обеспечивая получение файла окружения новыми участниками команды.

7. Валидация зависимостей пакетов

Проверка устаревших, дублирующихся или уязвимых зависимостей:

"scripts": {
  "check:deps": "npm outdated",
  "check:security": "npm audit",
  "check:duplicates": "npx depcheck"
}

8. Генерация документации

Автоматическая генерация документации из комментариев в коде:

"scripts": {
  "docs": "jsdoc -c jsdoc.json",
  "predeploy": "npm run docs"
}

9. Пользовательские рабочие процессы релизов

Автоматизация версионирования и релизов:

"scripts": {
  "version:patch": "npm version patch",
  "version:minor": "npm version minor",
  "version:major": "npm version major",
  "release": "npm run build && npm publish"
}

10. Оптимизация ресурсов

Сжатие изображений и других ресурсов:

"scripts": {
  "optimize:images": "imagemin src/images/* --out-dir=dist/images",
  "prebuild": "npm run clean && npm run optimize:images"
}

Продвинутые техники NPM-скриптов

Связывание скриптов с помощью Pre/Post хуков

NPM автоматически запускает скрипты с префиксами “pre” или “post” до или после основного скрипта:

"scripts": {
  "prebuild": "npm run lint",
  "build": "webpack",
  "postbuild": "npm run test"
}

Когда вы запускаете npm run build, автоматически выполняется prebuild, затем build, затем postbuild.

Передача аргументов в скрипты

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

npm run lint -- --fix

Это передает флаг --fix в фактическую команду линтинга.

Использование переменных окружения в скриптах

Получайте доступ к данным package.json через переменные окружения:

"scripts": {
  "echo-version": "echo $npm_package_version"
}

Когда вы запускаете npm run echo-version, выводится версия вашего пакета.

Кроссплатформенная совместимость

Обеспечьте работу ваших скриптов во всех операционных системах с помощью этих инструментов:

1. rimraf - Кроссплатформенная альтернатива rm -rf
2. cross-env - Установка переменных окружения на разных платформах
3. npm-run-all - Запуск нескольких скриптов последовательно или параллельно

Пример кроссплатформенных скриптов:

"scripts": {
  "clean": "rimraf dist",
  "copy": "copyfiles -u 1 src/**/*.html dist",
  "dev": "cross-env NODE_ENV=development npm-run-all clean copy --parallel watch:*"
}

Реальный пример: Полный Frontend-процесс

Вот комплексный набор скриптов для современного frontend-проекта:

{
  "scripts": {
    "clean": "rimraf dist",
    "lint:js": "eslint src/**/*.js --fix",
    "lint:css": "stylelint src/**/*.scss --fix",
    "lint": "npm-run-all --parallel lint:*",
    "test": "jest",
    "test:watch": "jest --watch",
    "format": "prettier --write \"src/**/*.{js,jsx,scss,json,md}\"",
    "validate": "npm-run-all --parallel lint test",
    "build:css": "sass src/styles:dist/styles --style compressed",
    "build:js": "webpack --mode production",
    "build": "npm-run-all clean lint --parallel build:*",
    "watch:css": "sass --watch src/styles:dist/styles",
    "watch:js": "webpack --watch",
    "serve": "browser-sync start --server dist --files dist",
    "dev": "npm-run-all clean --parallel watch:* serve",
    "prepublish": "npm run build",
    "version": "npm run format && git add -A src",
    "postversion": "git push && git push --tags"
  }
}

Эта настройка обеспечивает:

• Проверки качества кода с помощью линтинга и тестирования
• Автоматическое форматирование
• Оптимизированные сборки для продакшена
• Сервер разработки с горячей перезагрузкой
• Рабочий процесс управления версиями и публикации

Заключение

Внедрив эти практические NPM-скрипты, вы оптимизируете процесс разработки, улучшите качество кода и сделаете ваши проекты более удобными для сопровождения. Начните с малого, добавив скрипты для наиболее часто выполняемых задач, а затем постепенно расширяйте свой инструментарий автоматизации.

Часто задаваемые вопросы