Джефф Льюис

Что такое Nodemon?

Вы запустили свой сервер, и он, наконец, готов к работе. Вы вносите изменения, сохраняете файл и снова открываете браузер. Что-то не так. Он не перезагружался, и теперь вам приходится каждый раз вручную перезагружать сервер. Здесь на помощь приходит Nodemon.

Nodemon - это разработанная зависимость, которая отслеживает любые изменения в вашем приложении Node.js и автоматически перезагружает сервер, что позволяет сэкономить время и утомительную работу.

Что такое Opn?

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

Как я могу повысить эффективность своего развития?

Теперь, когда мы знаем, что делают обе зависимости, мы можем объединить их для максимальной эффективности (автоматический мониторинг проекта Nodemon и перезапуск сервера + ответ для автоматического открытия веб-браузера на локальном хосте)

Примечание. В этом руководстве будут использоваться Node.js, Express и Babel 7.

A. Инициализировать репозиторий

Если вы еще этого не сделали, инициализируйте свой проект через терминал с помощью NPM или Yarn. Это создаст package.json, в который будут добавлены наши зависимости разработчика. Если вы уже это сделали, можете пропустить эту часть A.

Используя NPM:

npm init

Использование пряжи:

yarn init

Б. Установить зависимости

Используя NPM:

npm install opn && npm install nodemon -dev

Использование пряжи:

yarn add opn && yarn add nodemon -dev

В. Добавить скрипт в Package.json

Мы собираемся добавить возможность nodemon автоматически перезапускать сервер в нашем скрипте package.json run server в файле server.js.

Примечание. babel-node включен в мой серверный скрипт, который преобразует код ES6 + на моем сервере Node.js в код ES5 для чтения всеми современными браузерами. Сценарий сервера также включает --exec, который выполнит файл server.js.

{
  "name": "YOURPROJECTNAME",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "server": "nodemon --exec babel-node ./server/server.js"
  },
  "author": "YOURNAME",
  "dependencies": {
    "express": "^4.16.4",
    "opn": "^5.4.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/node": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "nodemon": "^1.18.3"
  }
}

D. Импортировать Opn + автоматически открывать браузер с локального хоста при запуске сервера

В выделенной жирным шрифтом строке ниже мы настраиваем наш файл сервера, чтобы открыть URL-адрес нашего локального хоста. Если вам интересно, почему эти одинарные кавычки выглядят странно, то это потому, что они являются строками шаблонов ES6. Шаблонные строки позволяют динамически вставлять Javascript в строку, используя `$ {YOURCODE}`.

// Imports: Dependencies
import express from 'express';
import opn from 'opn';
// Express App
const APP = express();
// Express: Port
const PORT = 4000 || process.env;
// Express: Listener
APP.listen(PORT, () => {
  console.log(`The server has started on port: ${PORT}`);
  console.log(`http://localhost:${PORT}`);
});
// Open URL On Server Start
opn(`http://localhost:${PORT}`);
// Exports
export default APP;

Э. Настройка Babel (.babelrc)

Примечание. Я использую Babel 7, поэтому перед ним стоит символ «@».

{
  "presets": [
    "@babel/preset-env"
  ]
}

F. Запустите сервер Node.js

Настройка для Nodemon и Opn завершена, поэтому давайте запустим сервер + откройте браузер с локальным хостом с помощью одной команды терминала:

npm run server

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