Руководство по node.js, часть 4: npm, файлы package.json и package-lock.json / хабр

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

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

Следить за изменениями в нашем каталоге .
Когда происходит изменение, скомпилировать его в CSS в .
После обновления файла следует перезагрузить страницу.

Сначала нам нужно установить пакет NPM , чтобы следить за изменениями в исходных файлах:

Мы можем написать скрипт NPM, который запускает другие сценарии. Давайте добавим скрипт, который следит за изменениями и запускает наш скрипт :

Скрипт отслеживает изменения, используя пакет (src/scss) и запускает наш скрипт , когда происходят изменения.

Пакеты в Node.js

Вкратце, пакетом в Node.js называется один или несколько JavaScript-файлов, представляющих собой какую-то библиотеку или инструмент.

Файл 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"
  }
}

Затем сохраните файл и выполните в терминале команду .

Если вы хотите использовать в своём проекте множество пакетов, то лучше указать их 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 скачивает пакет, он ищет свойство «bin» в файле package.json. Если он находит это свойство, то он конвертирует этот пакет в исполняемый файл и размещает его в указанной директории.

Например, команда ниже загружает grunt-cli в текущую директорию и конвертирует исходники в исполняемый файл, который затем помещается в папку со всеми исполняемыми файлами. Вследствие этого мы сможем вызвать команду grunt-cli.

$ npm install grunt-cli

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

SVG Sprites

Популярность SVG возросла за последние несколько лет, и на это есть причины. Они четкие на всех устройствах, редактируются с помощью CSS и удобны для чтения с экрана. Однако, программное обеспечение для редактирования SVG обычно оставляет ненужный код. К счастью, svgo может помочь, удалив всё это.

Мы также можем автоматизировать процесс объединения и разбивки SVG-файлов в один SVG-файл (спрайт) (подробнее об этом здесь). Чтобы автоматизировать этот процесс, можно установить svg-sprite-generator.

После установки добавь задачу в объект в package.json:

Команда выполнит три действия в зависимости от наличия двух директив . Сначала используем , передавая папку SVG (флаг ); это сожмет все SVG внутри папки. Во-вторых, создадим папку , если она ещё не существует (с помощью команды ). И под конец, используем , передавая ему папку SVG (флаг ) и путь, по которому мы хотим вывести SVG-спрайт (флаг ).

Шаг 3 — Использование опций

Вы можете изменить параметры конфигурации, доступные .

Рассмотрим несколько основных опций:

: используйте оператор , чтобы задать двоичный код для выполнения файла. Например, в сочетании с двоичным кодом оператор может быть полезен для наблюдения за изменениями и запуска файлов TypeScript.
: задает различные расширения файлов для наблюдения. Для этого оператора требуется указать разделенный запятыми список расширений файлов (например, ).
: по умолчанию ожидает одну секунду для перезапуска процесса после изменения файла, однако с помощью оператора вы можете указать другое время задержки. Например, для задержки 3,2 секунды.
: используйте оператор , чтобы задать несколько каталогов или файлов для наблюдения. Добавляйте один оператор для каждого каталога, за которым вы хотите наблюдать. По умолчанию вы наблюдаете за текущим каталогом и его подкаталогами, а с помощью вы можете сузить область наблюдения до нескольких отдельных подкаталогов или файлов.
: используйте оператор , чтобы игнорировать определенные файлы, шаблоны файлов или каталоги.
: более развернутый вывод с информацией о том, какие файлы изменились, для активации перезапуска.

Вы можете просмотреть все доступные опции с помощью следующей команды:

Используя эти опции, создадим команду для соответствия следующему сценарию:

наблюдение за каталогом
указание файлов с расширением
игнорирование файлов с суффиксом
выполнение файла () с
ожидание перезапуска в течение трех секунд после изменения файла

Эта команда комбинирует опции , , , и , чтобы выполнить условия для нашего сценария.

Установка Node.js

Самое первое, что нам нужно сделать, чтобы настроить наш проект на работу со скриптами в NPM, это убедиться, что у нас установлен Node.js глобально. Звучит достаточно просто, но уже сейчас все становится немного сложнее, когда мы понимаем, что существует ряд различных способов как это сделать:

Загрузите последнюю версию с веб-сайта и следуйте инструкциям по установке.
Используйте менеджер пакетов, подобный Homebrew для Mac, который позволяет нам обновлять нашу версию узла простой командой: .
Использование NVM (Менеджер версий Node).

NVM — это мой предпочтительный вариант, так как он позволяет нам легко обновить версию узла, посмотреть, какую версию мы используем, перечислить другие установленные версии или переключиться на другую версию с помощью одной команды. Но описание установки NPM состоит из множества шагов, что выходит за рамки этой конкретной статьи.

После установки Node (любым удобным для вас способом) вы можете проверить текущую установленную версию, запустив . Если вы используете NVM, вы можете (опционально) создать конфигурационный файл , чтобы убедиться, что вы всегда запускаете правильную версию Node для вашего проекта.

Linting JavaScript

Также есть linting для JavaScript который поможет сделать то же самое при помощи: eslint.

Установим пакет, только на этот раз, используем ярлык:

Это тоже самое что:

После установки настраиваем некоторые основные правила для запуска кода, используя . Чтобы запустить настройку, запустим следующее:

Отвечаем на вопросы, которые он задает. Это создаст новый файл в корне проекта, с которым будет проверять код. Например:

Теперь давай добавим задачу в объект package.json:

Он ищет любые файлы JavaScript в папке и запускает их в соответствии с конфигурацией, созданной ранее. Еще есть много других .

Windows Machine:

Вам нужно убить сервер Node.js, и у вас не запущены никакие другие процессы Node, вы можете сказать своей машине, чтобы она убила все процессы с именем . Это будет выглядеть так:

И если процессы все еще продолжаются, вы можете принудительно завершить процессы, добавив флаг :

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

Пятый столбец вывода — это идентификатор процесса:

Затем вы можете убить процесс с помощью . Если процесс отказывается выйти, просто добавьте в команду параметр (force).

Зачем нужен репозиторий для стартового проекта?

В любом проекте вы, скорее всего, захотите иметь такие инструменты:

Запускать локальный сервер
Компилировать SCSS в CSS и минимизировать выходные данные
Атоматически перезагружать старницы при изменениях
Оптимизировать изображения
Создавать спрайты для SVG иконок

В более крупных проектах существует гораздо больше вариантов инструментов, которые мы могли бы добавить в набор, чтобы помочь нам создать эффективные и доступные веб-сайты. Возможно, нам понадобится упаковщик модулей, разделение кода и преобразование js кода (например из typescript в javascript). Что касается CSS, возможно, мы хотели бы подключить наши критически важные CSS или очистить неиспользуемые селекторы.

Если вы не знаете, что означают некоторые из этих слов, вы не одиноки! Фронт-энд стал гораздо более сложным в последние годы, и может быть трудно идти в ногу с постоянными изменениями для использования лучших практик. Одна статья, которая действительно помогла мне понять обширный инструментарий, который в наши дни попадает в область разработки фронт-энд разработчиков — Современный Javascript для динозавров. Хотя этой статье несколько лет, она все еще чрезвычайно актуальна и кратко объясняет, как Javascript превратился в такую жизненно важную часть нашего рабочего процесса.

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

Шаг 4 — Использование конфигураций

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

Например, здесь приведены те же конфигурации, что и в предыдущем примере командной строки, но они содержатся в файле :

nodemon.json

Обратите внимание, что используется вместо оператора. позволяет задавать двоичный код, который следует использовать для определенных расширений файлов

Если вы предпочитаете не добавлять в проект файл конфигурации , вы можете добавить эти конфигурации в файл в ключ :

package.json

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

подбирает конфигурации и использует их. Это позволяет сохранять конфигурации, делиться ими и воспроизводить их, чтобы избежать ошибок при копировании и вставке или ошибок ввода в командной строке.

3: Параметры nodemon

Вы можете изменить параметры конфигурации nodemon.

Давайте рассмотрим несколько основных опций:

–exec: позволяет указать двоичный файл, с помощью которого будет выполняться файл. Например, в сочетании с двоичным файлом ts-node –exec может отслеживать изменения и запускать файлы TypeScript.
–ext: указывает разные расширения отслеживаемых файлов. Эта опция принимает список расширений, разделенных запятыми (например, –ext js, ts).
–delay: по умолчанию nodemon ждет одну секунду, чтобы перезапустить процесс при изменении файла, но с помощью опции –delay вы можете указать другую продолжительность ожидания. Например, nodemon –delay 3.2 установит задержку в 3,2 секунды.
–watch: позволяет указать несколько отслеживаемых каталогов или файлов. Добавьте параметр –watch для каждого каталога, который вы хотите отслеживать. По умолчанию утилита отслеживает текущий каталог и его подкаталоги, а с помощью –watch вы можете сузить диапазон до определенных подкаталогов или файлов.
–ignore: позволяет игнорировать определенные файлы, шаблоны файлов или каталоги.
–verbose: выдает более подробный вывод с информацией о том, какие файлы были изменены и стали причиной перезапуска.

Вы можете просмотреть все доступные параметры с помощью следующей команды:

Давайте с помощью этих параметров создадим команду, которая:

Отслеживает каталог server
Задает файлы с расширением .ts
Игнорирует файлы с суффиксом .test.ts
Выполняет файл (server/server.ts) с помощью ts-node
Ожидает перезапуска в течение трех секунд после изменения файла

Эта команда включает параметры –watch, –ext, –exec, –ignore и –delay, чтобы соответствовать условиям нашего сценария.

Комбинирование скриптов

Теперь нам нужно запустить две команды параллельно: Команду для запуска нашего сервера и команду для компиляции нашего Sass в CSS, которая вызовет перезагрузку страницы. Используя скрипты NPM, мы можем легко выполнять команды последовательно, используя оператор :

Однако вариант с последовательным запуском нам не подходит, поскольку скрипт будет ждать до тех пор, пока скрипт не завершит работу, прежде чем он начнет выполнять скрипт . Если мы добавим этот скрипт, а затем запустим его в терминале (), то не будет запущен, пока мы не остановим сервер.

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

Основными опциями этого пакета (или, по крайней мере, те, которые нас волнуют) являются и . Первая предназначена для последовательной работы, вторая — для параллельной работы со скриптами. Как только мы установим этот пакет, мы сможем использовать его для написания скрипта, который будет запускать одновременно наши скрипты и . Мы назовем этот скрипт .

Теперь у нас есть очень простой стартовый проект. Мы написали несколько скриптов, которые позволяют нам просто набирать команду , чтобы запустить сервер, следить за изменениями, компилировать Sass в CSS и перезагружать страницу. Пример репозитория можно найти здесь.

Теперь мы можем установить некоторые пакеты и написать сценарии для автоматизации некоторых других задач, таких как оптимизация изображений, создание спрайтов SVG и минификации JS.

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

Шаг 2 — Настройка образца проекта Example Express с помощью nodemon

Мы можем использовать для запуска скрипта Node. Например, если у нас имеется настройка сервера Express в файле , мы можем запустить его и наблюдать за изменениями следующим образом:

Вы можете передавать аргументы точно так же, как если бы запускали скрипт с помощью Node:

Процесс перезапускается каждый раз, когда вы вносите изменение в файл с одним из отслеживаемых по умолчанию расширений (, , , или ) в текущем каталоге или подкаталоге.

Допустим мы записываем образец файла , который выводит сообщение: .

Мы можем запустить пример с помощью :

Мы видим следующий вывод на терминале:

Пока еще работает, внесем изменение в файл для вывода сообщения: .

Мы увидим следующий дополнительный вывод на терминале:

Вывод приложения Node.js на терминале отображается, как и ожидалось. Вы можете перезапустить процесс в любое время, набрав и нажав .

Также будет искать файл , заданный в файле вашего проекта:

package.json

Или скрипт :

package.json

После внесения изменений в вы сможете вызывать для запуска образца приложения в режиме наблюдения без его передачи в .

BrowserSync

BrowserSync может делать несколько вещей: запускать локальный сервер, автоматически вставлять обновленные файлы в любой подключенный браузер и синхронизировать щелчки, и прокрутки между браузерами. Установим и добавим задачу:

Задача запускает сервер (флаг ), используя текущий путь в качестве корневого, по умолчанию. Флаг указывает BrowserSync на просмотр любого файла CSS или JS в папке ; всякий раз, когда что-то там меняется, он автоматически вставляет измененные файлы на страницу.

Мы можем открыть несколько браузеров (даже на разных устройствах), и все они будут получать обновленные изменения файлов в режиме реального времени.

Linting стилей

При разработке кода важно придерживаться стандартного формата и стиля, чтобы свести ошибки к минимуму, и повысить эффективность работы разработчика. Stylelint помогает делать это автоматически для стилей, так что давай добавим linting стилей с помощью stylelint

Далее мы создадим файл в корне директории. Мы можем использовать свою конфигурацию или использовать . Как сделать свою конфигурацию смотри здесь. Добавим в файл :

Теперь добавим задачу в объект package.json:

ищет любые файлы scss в папке и запускает их в соответствии с конфигурацией, созданной ранее. Также, есть много других настроек.

Проверить его

npm start (для запуска вашего сервера, как обычно)

npm stop (это остановит ваш текущий сервер)

Вышеприведенный код не был протестирован (это сокращенная версия моего кода, мой код действительно работает), но, надеюсь, он работает так, как есть. В любом случае, это обеспечивает общее направление, если вы хотите использовать socket.io, чтобы остановить ваш сервер.

Когда я попробовал предлагаемое решение, я понял, что мое имя приложения усечено. Я прочитал в process.title в документации nodejs (https://nodejs.org/docs/latest/api/process.html#process_process_title), и он говорит

Мое приложение не использует никаких аргументов, поэтому я могу добавить эту строку кода в свой app.js

а затем добавьте эти несколько строк в мой package.json файл

использовать действительно длинные имена процессов. npm start и npm stop работают, конечно npm stop всегда завершает все запущенные процессы, но это нормально для меня.

Здесь другое решение, которое смешивает идеи из предыдущих ответов. Он принимает подход «процесс уничтожения», обращаясь к проблеме независимости платформы.

Он полагается на пакет tree-kill для обработки уничтожения дерева процессов сервера. Я обнаружил, что уничтожил все дерево процессов, необходимое в моих проектах, потому что некоторые инструменты (например, babel-node ) порождают дочерние процессы. Если вам нужно только убить один процесс, вы можете заменить tree-kill на встроенный метод process.kill() .

Решение следует (первые два аргумента spawn() должны быть изменены, чтобы отразить конкретный рецепт для запуска вашего сервера):

npm start (для запуска вашего сервера, как обычно)

npm stop (это остановит ваш текущий сервер)

4 плюса

676 Репутация автора

Вот еще одно решение, которое смешивает идеи с предыдущими ответами. Он принимает подход «процесс уничтожения» при решении проблемы независимости платформы.

Он полагается на пакет tree-kill , чтобы обрабатывать уничтожение дерева процессов сервера. Я обнаружил, что для всех проектов, необходимых в моих проектах, было убито, потому что некоторые инструменты (например babel-node ) порождают дочерние процессы. Если вам нужно только убить один процесс, вы можете заменить tree-kill встроенным process.kill() методом.

Обратите внимание, что это решение отделяет скрипт запуска от сервера (т.е. npm start будет немедленно возвращаться и не блокироваться до тех пор, пока сервер не будет остановлен)

Если вы предпочитаете традиционное поведение блокировки, просто удалите options.detached аргумент spawn() и вызов child.unref() .

6 плюса

1064 Репутация автора

Проверить с netstat -nptl все процессы

И это просто убивает процесс ссылкой PID . В моем случае я хочу остановить 6231 / nodejs, поэтому я выполняю следующую команду:

2 плюса

21 Репутация автора

Если это очень просто, просто запустите процесс.

2 плюса

59 Репутация автора

Это проблема с монетной версией, альтернативно использующая cmd. Чтобы убить серверный процесс, просто запустите эту команду:

плюса

463 Репутация автора

В MAC OS X (/ BSD): вы можете попробовать использовать команду lsof (список открытых файлов)

Я запускаю сайт на node.js на vds хостинге с помощью npm start server.js . Все работает, консоль выводит логи, другие могут заходить по ip.

Если нужно перезапустить node, приходится перезагружать весь сервер и заново запускать node. У себя на компе (на windows) я просто закрывал консоль.

Как реализовать остановку и рестарт node из консоли для хостинга?

4: Конфигурация nodemon

Как видно из предыдущей команды, добавление флагов nodemon может оказаться довольно утомительным процессом. Лучшее решение для проектов, которым требуются определенные конфигурации, – указать эти конфигурации в файле nodemon.json.

Например, вот те же конфигурации, что и в предыдущей команде – только теперь они помещены в файл nodemon.json:

Обратите внимание: вместо флага –exec мы используем здесь execMap. execMap позволяет указывать двоичные файлы, которые следует применять при определенных расширениях файлов

Если вы не хотите добавлять конфигурационный файл nodemon.json в свой проект, вы можете добавить эти конфигурации в файл package.json с помощью ключа nodemonConfig:

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

nodemon подберет конфигурации из файла и использует их. Таким образом, ваши конфигурации можно сохранять, публиковать и повторять, чтобы избежать ошибок и необходимости вручную вводить опции (или постоянно копировать и вставлять их).

Файл package.json¶

Для более удобного управления конфигурацией и пакетами приложения в npm применяется файл конфигурации . Так, добавим в папку проекта новый файл :

Здесь определены только две секции: имя проекта — и его версия — . Это минимально необходимое определение файла . Данный файл может включать гораздо больше секций. Подробнее можно посмотреть в документации.

Далее удалим из проекта каталог . То есть в папке проекта будут два файла и .

Теперь снова добавим с помощью следующей команды:

Флаг указывает, что информацию о добавленном пакете надо добавить в файл .

И после выполнения команды, если мы откроем файл , то мы увидим информацию о пакете:

Информация обо всех добавляемых пакетах, которые используются при запуске приложения, добавляется в секцию .

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

Эта команда возьмет определение всех пакетов из секций и загрузит их в проект.

2 ответа 2

Используй сочетание кнопок CTRL + C чтобы остановить. И научись пользоваться screen, я скинул тебе мануал как работать с ним в CentOS, но для других ОС тоже есть и использование аналогично, установка немного различна, но суть почти одна и та же.

Создай файл run.sh и запускай через него, будет в будущем удобно, особенно когда нормально разберешься.

Скрипт можешь добавить в автозагрузку, тогда сервер будет стартовать сразу же после включения

В packege.json укажи

Если ты во время разработки постоянно перезапускаешь сервер, то можешь воспользоваться nodemon, он следит за файлами и если, что-то изменилось, то перезапускается