npm для простых смертных

Эта статья предназначена для тех, кто не очень дружит с Node.js, но хочет использовать приложения вроде Grunt, Gulp и тому подобные. Процесс работы с этими приложениями подразумевает редактирование файла package.json и использование команд npm, так что понимание принципов работы npm поможет вам справиться с трудностями.

Node.js за 5 минут

Понимание того, что такое Node.js поможет вам лучше разобраться с npm. В двух словах — Node.js это интерпретатор языка JavaScript. Сам по себе Node.js является C++ приложением, которое получает на входе JavaScript-код и выполняет его.
Давайте создадим простую программу. Создайте файл helloworld.js и поместите в него следующий код:

console.log("Hello World");

Теперь откройте терминал, зайдите в папку с вашей программой и выполните команду node helloworld.js. Вместо helloworld.js может быть любой другой файл с JavaScript-кодом. Убедитесь, что у вас установлен Node.js. Результат выполнения программы будет выглядеть примерно так:



Программа просто выведет строку «Hello World» в терминал.

Пакеты в Node.js

Вкратце, пакетом в Node.js называется один или несколько JavaScript-файлов, представляющих собой какую-то библиотеку или инструмент.
npm (аббр. node package manager) — это стандартный менеджер пакетов, автоматически устанавливающийся вместе с Node.js. Он используется для скачивания пакетов из облачного сервера npm, либо для загрузки пакетов на эти сервера.

Файл package.json

Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное. Любая директория, в которой есть этот файл, интерпретируется как Node.js-пакет, даже если вы не собираетесь публиковать его.
Способ использования файла package.json зависит от того, собираетесь ли вы скачивать пакет или публиковать его.

Скачивание пакетов

Если вы хотите скачать пакет вручную, вам необязательно использовать для этого package.json. Вы можете выполнить в терминале команду npm с названием нужного пакета в качестве аргумента команды, и пакет будет автоматически скачан в текущую директорию. Например:

$ npm install canvas-chart

Также для скачивания пакетов вы можете использовать package.json. Создайте в директории вашего проекта файл package.json, и добавьте в него следующий код (мы не указываем название нашего пакета и версию, т. к. мы не собираемся его публиковать; мы указываем название и версию пакетов для загрузки):

{
  "devDependencies": {
    "canvas-chart": "~1.3.0"
  }
}

Затем сохраните файл и выполните в терминале команду npm install.
Если вы хотите использовать в своём проекте множество пакетов, то лучше указать их package.json вместо того, чтобы каждый раз скачивать их через терминал.
Если вы используете package.json для скачивания пакетов, то получается, что вы создаёте пакет для скачивания пакетов. Я знаю, что это странно, но это работает.
Если какой-либо пакет имеет зависимости, то npm найдёт их через package.json загружаемого пакета и скачает их. В нашем случае у пакета canvas-chart тоже есть файл package.json с прописанными в нём зависимостями.

Публикация пакета

Чтобы опубликовать пакет, вам потребуется собрать все исходные коды и файл package.json в одной директории. В package.json должны быть указаны название, версия и зависимости пакета. Например:

{
  "name": "canvas-project",
  "version": "0.1.0",
  "devDependencies": {
    "canvas-chart": "~1.3.0"
  }
}

Посмотрев на этот код, мы можем сказать, что пакет «canvas-project» зависит от пакета «canvas-chart». Опубликовать пакет можно с помощью комадны npm publish.

Использование пакета в качестве исполняемого файла

Когда npm скачивает пакет, он ищет свойство «bin» в файле package.json. Если он находит это свойство, то он конвертирует этот пакет в исполняемый файл и размещает его в указанной директории.
Например, команда ниже загружает grunt-cli в текущую директорию и конвертирует исходники в исполняемый файл, который затем помещается в папку со всеми исполняемыми файлами. Вследствие этого мы сможем вызвать команду grunt-cli.

$ npm install grunt-cli

Теперь вы знаете, что такое пакет и как он может зависеть от других пакетов. Также вы узнали, как npm работает с пакетами. Давайте перейдём от теории к практике и установим Grunt.

Установка Grunt с помощью npm

Grunt это таск-раннер, позволяющий автоматизировать многие повседневные задачи вроде сжатия изображений и минификации css-файлов.
Выполните следующие шаги, чтобы установить Grunt и начать работу с ним.

• Создайте директорию для вашего проекта. С точки зрения сервера эта директория будет корневой.
• Откройте эту директорию через терминал.
• Теперь скачайте и установите Grunt. Аргумент -g указывает npm на то, что пакет следует скачивать в основную папку для хранения пакетов, а не в текущую директорию.
  

  $ npm install -g grunt-cli
  

  
  
• Для каждой задачи, выполняемой grunt’ом, есть отдельный пакет. Например, можно найти пакеты для минификации JavaScript, склеивания файлов и так далее. Также вы можете создавать собственные пакеты для выполнения каких-либо задач; такие пакеты будут называться Grunt-плагинами. Давайте установим нужные нам пакеты в директирии нашего проекта. Для этого нам понадобится создать файл package.json и поместить в него код ниже. Затем выполните команду npm install. Она загрузит нужные пакеты. Помните о том, что директория, содержащая package.json, сама является пакетом.
  

  {
    "devDependencies": {
      "grunt-contrib-concat": "~0.3.0"
    }
  }
  

  
  
• Мы установили пакет для склеивания файлов. Теперь нам надо описать задачу для Grunt. Это делается с помощью файла Gruntfile.js. Когда вы выполняете команду grunt в директории проекта, Grunt будет искать Gruntfile.js, чтобы загрузить и выполнить задачи. Давайте подключим наш плагин для склеивания файлов и опишем простую задачу.
  

  module.exports = function(grunt) {
   
      // 1. Общая конфигурация
      grunt.initConfig({
          pkg: grunt.file.readJSON('package.json'),
   
          concat: {
              // 2. Настройки для склеивания файлов
              dist: {
                  src: [
                      'js/libs/*.js', // Все js-файлы в директории libs
                      'js/global.js'  // Отдельный файл
                  ],
                  dest: 'js/build/production.js',
              }
          }
   
      });
   
      // 3. Сообщаем, какие плагины мы собираемся использовать
      grunt.loadNpmTasks('grunt-contrib-concat');
   
      // 4. Определяем задачу по умолчанию, которая будет выполняться при запуске команды grunt в терминале.
      grunt.registerTask('default', ['concat']);
   
  };
  

  
  
• По этому принципу вы можете сами скачать и подключить нужные плагины.
• Теперь вы можете запустить команду grunt в директории вашего проекта, чтобы склеить js-файлы.

Итог

В этой статье я попробовал объяснить то, как работает npm для новичков в Node.js. Теперь вы должны быть способны устанавливать и использовать различные Node.js-приложения. Спасибо за чтение!