Путешествие по производству программного обеспечения (часть 2)

Это вторая часть серии статей: От фиксации к развертыванию, часть 1 вы можете найти здесь.

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

Мы можем начать с создания каталога с именем quote-of-the-day:

mkdir -p quote-of-the-day
cd quote-of-the-day

Две приведенные выше командные строки делают следующее:

  1. mkdir -p quote-of-the-day: создается каталог с именем «Цитата дня». Здесь mkdir — это команда для создания каталога, а -p — это параметр, подавляющий сообщения об ошибках, если каталог уже существует. Эта команда создает каталог с именем «цитата дня» в текущем рабочем каталоге.
  2. 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

Две приведенные выше команды:

  1. mkdir -p src dist: Это создает два каталога с именами «src» и «dist». mkdir — это команда для создания каталогов, а -p — это опция, которая означает, что она не выдаст ошибку и продолжит выполнение, если каталоги уже существуют. Эта команда создает каталоги src и dist в текущем рабочем каталоге.
  2. 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">&mdash; 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 для расширения содержания первой части и узнаем больше о сценариях сборки.