Путешествие по производству программного обеспечения (часть 2)
Это вторая часть серии статей: От фиксации к развертыванию, часть 1 вы можете найти здесь.
В этой части мы разработаем первую версию нашего приложения «Цитата дня». Эта версия проста, просто отображает статическую вдохновляющую цитату на веб-странице, которую можно запустить в браузере.
Мы можем начать с создания каталога с именем quote-of-the-day
:
mkdir -p quote-of-the-day cd quote-of-the-day
Две приведенные выше командные строки делают следующее:
mkdir -p quote-of-the-day
: создается каталог с именем «Цитата дня». Здесьmkdir
— это команда для создания каталога, а-p
— это параметр, подавляющий сообщения об ошибках, если каталог уже существует. Эта команда создает каталог с именем «цитата дня» в текущем рабочем каталоге.cd quote-of-the-day
: Это перемещает в каталог «Цитата дня».cd
— это команда для изменения текущего рабочего каталога, а «quote-of-the-day» — имя целевого каталога. Эта команда переключает текущий рабочий каталог на каталог «цитата дня».
Внутри этого пустого каталога мы можем инициализировать его как проект Node.js, выполнив npm init
:
$ npm init -y
Параметр -y
указывает команде npm
пропустить интерактивный интерфейс и сгенерировать проект Node.js со значениями по умолчанию. По завершении npm запишет файл package.json в текущий каталог. Этот файл является файлом дескриптора нашего проекта, и наши будущие сценарии сборки будут вращаться вокруг него.
Wrote to /Users/juntao/icodeit/ideas/quote-of-the-day/package.json: { "name": "quote-of-the-day", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
Теперь, если мы выполним npm test
в командной строке, мы получим следующий вывод:
> [email protected] test > echo "Error: no test specified" && exit 1 Error: no test specified
Это связано с тем, что в разделе scripts
файла package.json мы определили команду, которая выполняется при запуске test
:
echo "Error: no test specified" && exit 1
Эта строка фактически состоит из двух отдельных команд, echo "Error: no test specified"
и exit 1
, связанных логическим оператором &&
. Как и в языках программирования, вторая команда (exit 1
) выполняется только в том случае, если первая команда (echo
) выполняется успешно. Если мы изменим test
в package.json на:
"scripts": { "test": "echo \"⛔️ I don't know what to run 🤷\" && exit 1" },
Когда мы снова запустим npm test
, вывод командной строки изменится:
Кроме того, мы можем определять новые задачи в сценариях. Например, мы можем определить задачу с именем start
, которая выводит текущее время при выполнении:
"scripts": { "test": "echo \"⛔️ I don't know what to run 🤷\" && exit 1", "start": "echo 🕞: `date`" },
При выполнении npm start
в командной строке отображается:
Хорошо, теперь, когда у нас есть общее представление о разделе scripts
в package.json
, мы можем приступить к разработке Цитата дня.
Инициализация проекта
Во-первых, нам нужно определить два каталога: src
для хранения исходного кода и dist
для использования в качестве корневого каталога сервера. Поскольку наше приложение будет работать на локальном порту, нам нужен HTTP-сервер, поэтому, когда пользователи получают доступ к этому порту через браузер, они получат доступ к содержимому в каталоге dist
.
mkdir -p src dist touch src/index.html src/style.css
Две приведенные выше команды:
mkdir -p src dist
: Это создает два каталога с именами «src» и «dist».mkdir
— это команда для создания каталогов, а-p
— это опция, которая означает, что она не выдаст ошибку и продолжит выполнение, если каталоги уже существуют. Эта команда создает каталоги src и dist в текущем рабочем каталоге.touch src/index.html src/style.css
: Это создает два файла: «src/index.html» и «src/style.css».touch
— это команда, используемая для создания файлов, за которой следует путь и имя файла. Эта команда создает файл index.html и файл style.css в каталоге src.
В первом варианте нам достаточно вывести статическую цитату в index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quote of the day</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <p class="content">If you want to lift yourself up, lift up someone else.</p> <p><span class="author">— Booker T. Washington</span></p> </div> </body> </html>
В соответствующем файле CSS мы определили стиль выравнивания текста:
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
Этот код выравнивает содержимое элемента <body>
по центру области просмотра и гарантирует, что высота всей страницы заполняет всю высоту области просмотра. Это распространено во многих веб-макетах, помогая выровнять содержимое страницы по центру и заполнить весь экран.
Мы завершили изменения кода, необходимые для первой версии. Далее нам нужно установить HTTP-сервер, чтобы мы могли получить доступ к нашему приложению через браузер.
Статический сервер: http-сервер
http-сервер в Node.js — это простой инструмент командной строки для локального создания базового HTTP-сервера. Он позволяет быстро запускать статический файловый сервер во время разработки для тестирования и отладки веб-страниц, приложений или других статических ресурсов.
http-сервер предоставляет облегченный сервер разработки, который работает на локальном хосте и прослушивает указанный порт. Вы можете использовать инструмент командной строки http-server для запуска сервера, указав каталог файлов и номер порта, который будет обслуживаться. После запуска сервера вы можете просматривать и получать доступ к своим файлам, посетив соответствующий URL-адрес в браузере.
http-сервер — популярный инструмент разработки, поскольку он прост в использовании, не требует дополнительной настройки и предоставляет базовые функции HTTP-сервера, такие как статический доступ к файлам, управление кешем и поддержка CORS. Это один из предпочтительных инструментов для многих разработчиков в экосистеме Node.js во время локальной разработки.
Мы можем установить этот инструмент, выполнив следующую команду в Терминале:
npm install http-server --save-dev
После установки http-server
мы можем использовать команду http-server
в Shell. Обычно мы указываем каталог в качестве корня HTTP-сервера, а затем указываем порт:
http-server dist -p 3000
Эта команда запускает HTTP-сервер в папке dist
в текущем рабочем каталоге и прослушивает порт 3000. Таким образом, мы можем просматривать и получать доступ к статическим файлам в папке dist
, посетив https://localhost:3000
в браузере.
Однако текущая проблема заключается в том, что в каталоге dist
нет содержимого. Нам нужно скопировать файлы HTML и CSS из src
в dist
. Хотя этот шаг может показаться излишним, он необходим для изоляции исходного кода от рабочего кода.
В нашей первой версии исходный код прост, и нам не нужно делать преобразования или сложные разработки, поэтому исходный код и производственный код совпадают.
В реальных сценариях исходный код обычно отформатирован для удобства написания и отладки разработчиками, в то время как производственный код не должен учитывать удобочитаемость и часто сжимается или запутывается, чтобы предотвратить обратный инжиниринг. Поэтому они обычно не совпадают. Мы обсудим это более подробно в следующей части.
Мы можем определить новую задачу build
в package.json
. Содержание этой задачи состоит в том, чтобы скопировать HTML и CSS из src
в dist
:
"scripts": { "build": "cp src/* dist/" },
Наконец, нам нужно изменить задачу start
следующим образом:
"scripts": { "build": "cp src/* dist/", "start": "http-server dist -p 3000" },
Сначала нам нужно выполнить npm run build
, чтобы скопировать исходные файлы в производственный код. Затем, когда мы выполним npm start
, http-server
будет работать на порту 3000.
npm run build npm start
Введите https://localhost:3000
в браузере, и вы увидите нашу первую версию Цитата дня!
В этой части мы впервые представили использование оболочки и интерфейса командной строки, в том числе то, как вводить команды в командной строке, как просматривать вывод команд и как использовать командную строку для быстрой и эффективной разработки.
Затем мы потратили некоторое время на интерпретацию раздела scripts
в файле package.json
Node.js. Мы узнали, как определять наши собственные задачи, как использовать команду npm run
для запуска этих задач, а также важность этих задач в процессе разработки и сборки проекта.
Кроме того, мы также подробно описали использование http-server
. Мы объяснили, как использовать этот простой HTTP-сервер для предварительного просмотра и тестирования нашего проекта, дав всем более глубокое понимание этого общего инструмента разработки.
Наконец, мы успешно создали и запустили первую версию страницы «Сегодняшняя пословица», используя наши новые знания. С помощью этого практического проекта читатели смогут лучше понять и освоить приведенные выше теоретические знания, а также мы продемонстрировали, как запустить HTTP-сервер локально, а также развернуть и просмотреть наш проект на сервере.
Следующий…
В следующей части мы будем использовать React для расширения содержания первой части и узнаем больше о сценариях сборки.