Джефф Льюис
Что такое 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
Сервер запущен, и это руководство готово. Это может показаться не таким уж большим, но поверьте мне, вы удивитесь, почему вы когда-либо вручную открывали и обновляли браузер каждый раз. Ведь суть программирования - автоматизация и улучшение задач.