Фронтенд-разработчик
1,6
рейтинг
16 ноября 2014 в 15:45

Разработка → npm для простых смертных перевод tutorial



Эта статья предназначена для тех, кто не очень дружит с 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. Результат выполнения программы будет выглядеть примерно так:

Результат выполнения helloworld.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-приложения. Спасибо за чтение!
Перевод: Narayan Prusty
Андрей Романов @andrew-r
карма
27,0
рейтинг 1,6
Фронтенд-разработчик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (11)

  • –62
    зайдите в папку

    в мамку

    В оригинале используется слово directory, которое переводится как директория.
  • +7
    А как же npm init? Всегда казалось, что это первый шаг к созданию package.json или вы советуете вручную его всегда создавать? На мой взгляд очень обрывочный туториал — там чуть чуть, здесь чуть чуть. Опять же не описан ключ --save-dev, при котором по команде npm install пакет прописывается в секцию devDependencies вместе с указанием устанавливаемой версии (не вручную же его туда добавлять, если устанавливаем из командной строки).
    • 0
      Вот еще несколько полезных шорткатов.
      Когда устанавливаешь много всего позволяет экономить время:
      npm i -g grunt-cli # Вместо npm install -g grunt-cli 
      
      npm i grunt-cli -D # Вместо npm install grunt-cli --save-dev
      
      npm i grunt-cli -S # Вместо npm install grunt-cli --save
      
  • +3
    Кстати, помимо глобально установленного grunt-cli в папке с проектом должен быть локально установлен grunt (npm install grunt), иначе при его вызове выдаётся ошибка «Fatal error: Unable to find local grunt.». В статье об этом не написано, предлагаете новичкам разобраться с проблемой самостоятельно?
    • +1
      С gulp так же помоему
  • +11
    Откровенно слабая статья, ничего обо всем.
  • +1
    Странновато, не описали подтягивание зависимостей и как писали выше про npm init.
    Думаю будет полезным в дополнение к, как вы назвали: 'простым смертным'. Странноватое и название.
    www.youtube.com/watch?v=Cxo1vVI9--E
  • +1
    2 часа про: node.js npm gulp.js snap.svg.
    www.youtube.com/watch?v=4P1-JwZF0Vo
  • +1
    Присоединяюсь к высказавшимся выше. Статья имеет очень посредственное отношение к npm, например автор забыл упомянуть о том, куда скачиваются эти зависимости (папка node_modules). И что в случае зависимостей у зависимостей, внутри каждого пакета будет своя директория node_modules. Зачем было в статье про npm приплетать grunt и gulp? В общем, намешано много всего и поверхносно.
  • –2
    Вы можете выполнить в терминале команду npm с названием нужного пакета в качестве аргумента команды, и пакет будет автоматически скачан в текущую директорию. Например:

    $ npm install canvas-chart

    Для читателей, не знакомых с npm, полезно сказать тут же, что на самом деле эта команда приводит к развёртыванию пакета canvas-chart не в том каталоге, где она была вызвана, а в его подкаталоге node_modules/canvas-chart.

    Такое поведение npm для большинства пользователей Node.js бывает удобно — и это потому, что в том же подкаталоге этот модуль станет искать и функция вызова require('canvas-chart'), если её вызвать в Node.

    А вот для тех пакетов, которые предназначены для употребления не на сервере, а во браузере, это поведение ужé не так удобно (вот почему именно это обстоятельство в ряду других оказалось справедливо обруганным в статье «JavaScript Modules: Welcome to My Emo Hellscape», например).
  • 0
    Про package.json можно хоть отдельную статью писать. Ведь если не умеешь им пользоваться — гореть тебе в адском пламени непонимания и непрерывного круга повторений. Зависимости, scripts, информация о репозитории, версия и прочая информация о вашем приложении находится именно в нём. Кто далёк от NodeJS, но знает что такое Composer — всё прекрасно поймёт. Одним npm install можно развернуть и запустить весь свой «где-то в далёком репозитории» проэкт. В общем, штука не такая уж и сложная, но весьма полезная.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.