Поиск по сайту:

Как связать веб-приложение с Parcel.js

Введение

При разработке сайта или веб-приложения рекомендуется разделить код на более мелкие и более управляемые фрагменты. В рабочей среде запрос всех ваших ресурсов по отдельности может замедлить работу вашего приложения. Компоновщик – это инструмент, используемый для решения этой проблемы с задержкой путем объединения и слияния вашего кода в один файл. Это ограничивает количество HTTP-запросов к серверу для этих ресурсов. Использование сборщика полезно для оптимизации работы как пользователя, так и разработчика.

Parcel.js — это сборщик с открытым исходным кодом. Он поддерживает многие популярные языки, такие как Typescript и SASS, а также может работать с такими типами файлов, как изображения и шрифты. В Parcel встроено несколько дополнительных инструментов: сервер разработки, диагностика, минимизация и даже сжатие изображений. Если ваш проект требует дополнительных настроек, у вас есть возможность использовать множество плагинов Parcel.

В этом руководстве вы будете использовать Parcel для создания и сборки небольшого веб-приложения, содержащего файлы HTML, CSS и JavaScript. Вы будете взаимозаменяемо работать с текстовым редактором и терминалом. Вы также узнаете, как настроить Parcel с помощью пользовательских скриптов npm, чтобы помочь с запуском и сборкой вашего приложения.

Предпосылки

Чтобы следовать этому руководству, вам понадобятся:

  • Понимание HTML, CSS и JavaScript. Вы можете узнать об этом из нашей серии руководств How To Code in JavaScript.
  • Текстовый редактор, например Visual Studio Code. Вы можете использовать любой текстовый редактор, который вам нравится.
  • Знакомство с терминалом. Вы можете узнать, как использовать терминал, из наших руководств Learning to Love Your Terminal.
  • Node.js установлен на вашем локальном компьютере. Следуйте нашему руководству по установке Node.js и созданию локальной среды разработки для вашей конкретной среды.

Установив Node.js на свой компьютер, вы готовы приступить к следующим шагам.

Шаг 1 — Установка Parcel Bundler

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

В каталоге your_project используйте терминал или командную строку для инициализации проекта с помощью команды npm init:

  1. npm init

Эта команда вызовет серию запросов о вашем проекте. Вы можете нажать ENTER, чтобы перейти к каждому вопросу, или изменить любой из параметров по умолчанию на ваши предпочтительные настройки. Когда вы закончите, и если вы не изменили какие-либо настройки по умолчанию, у вас будет файл package.json, содержащий следующую информацию, которую можно просмотреть в текстовом редакторе:

{
  "name": "your_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Затем установите сборщик Parcel локально, используя флаг --save-dev:

  1. npm install --save-dev parcel

Флаг --save-dev сохраняет пакет установки как зависимость разработки. Это означает, что ваш проект будет полагаться на Parcel в процессе разработки для управления и создания вашего приложения.

После установки в ваш проект будут включены дополнительный файл package-lock.json и каталог node_modules. Файл package-lock.json автоматически создается при установке npm. В нем описываются все зависимости, на которые ваш проект полагается для правильной работы. Если вас интересует информация, которую содержит этот файл, вы можете изучить документацию по npm. Как и файл package-lock.json, папка node_modules содержит все различные пакеты, на которые опирается ваш проект. Обратите внимание, однако, что автоматически сгенерированные файлы в этом сценарии не предназначены для непосредственного редактирования.

Обратите внимание, что в файле package.json он теперь включает parcel в качестве зависимости разработки:

...
"devDependencies": {
    "parcel": "^2.7.0"
  }
…

Теперь, когда сборщик Parcel установлен как локальная зависимость, вы готовы начать работу над своим приложением.

Шаг 2 — Создание файлов приложения

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

Parcel может принять любой файл в качестве точки входа для вашего приложения. Файл точки входа — это место, где начинается выполнение вашего приложения. С этой точки входа Parcel создает ваше приложение со всеми зависимостями, на которые вы указываете, включая ссылки на файлы CSS и JavaScript. Вы будете использовать HTML-файл index.html в качестве точки входа в ваше приложение.

С помощью текстового редактора создайте папку src в каталоге your_project для хранения и организации вашего кода. Если вы используете Visual Studio Code, вы можете щелкнуть правой кнопкой мыши внутри каталога your_project и выбрать Новая папка и назовите его src:

В этой папке src создайте файл index.html. В Visual Studio Code щелкните правой кнопкой мыши внутри папки src и выберите Новый файл. Назовите этот файл index.html.

Включите в файл index.html следующие строки:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Your Parcel Project</title>
  </head>
  <body>
    <h1>Welcome to Parcel!</h1>

    <div class="sammy-wrapper">
      <div class="img-wrapper sammy-1">
        <img src="https://assets.linux-console.net/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
      </div>
    </div>
    
    <button>Change the Background Color</button>

    <script type="module" src="js/app.js"></script>
  </body>
</html>

Этот файл HTML является целевой страницей для вашего приложения. Он включает ссылки на таблицу стилей и сценарий. Эти файлы будут храниться в соответствующих папках, чтобы ваш код был отдельным и организованным. Не забудьте сохранить файл после обновления. В VS Code вы можете сохранить файл, нажав CTRL+S или CMD+S.

В каталоге src создайте еще одну папку с именем css. Затем внутри папки css создайте таблицу стилей CSS с именем style.css. :

Включите следующий код CSS в файл style.css:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  color: white;
  background: var(--bg, rgb(26, 80, 190));
  font-size: 16px;
}
h1 {
  font-size: 3rem;
  padding: 2rem;
}
.img-wrapper {
  max-width: 600px;
  padding: 0 1rem;
  margin: 2rem;
  cursor: pointer;
}
.img-wrapper img {
  width: 100%;
}
button {
  font-size: inherit;
  font-size: 1rem;
  padding: .5rem;
  margin: 8rem 0;
}

Не забудьте сохранить этот файл.

Затем внутри каталога src создайте папку js для хранения кода JavaScript:

В папке js создайте файл app.js со следующим кодом:

const btn = document.querySelector('button');
const body = document.querySelector('body');

let availableColors = ['darkslateblue', 'midnightblue', 'teal', 'tomato', 'seagreen', 'royalblue', 'saddlebrown', 'indigo', 'olivedrab', 'rosybrown'];

btn.addEventListener('click', function() {
  const randomizeColor = Math.floor(Math.random() * availableColors.length);
  body.style.setProperty('--bg', availableColors[randomizeColor]);
});

Код JavaScript случайным образом выбирает цвет из массива availableColors, а затем меняет фон на этот цвет по щелчку.

После редактирования сохраните этот файл.

В целом, ваша текущая архитектура сайта будет следующей:

your_project/
|── node_modules
|── src/
|   |── css/
|   |   |── style.css
|   |── js/
|   |   |── app.js
|   |── index.html
|── package.json
|── package-lock.json

Создав основные элементы вашего приложения, вы можете использовать Parcel для просмотра и настройки вашего приложения.

Шаг 3 — Запуск вашего приложения на сервере разработки

Один из способов просмотреть ваше приложение — открыть HTML-файл в браузере. Однако, если вы внесли изменения в любой из ваших файлов, вам придется вручную обновлять браузер каждый раз, когда вносятся изменения. Parcel поставляется с сервером разработки, который работает на вашем компьютере. Когда вы вносите изменения в свой код во время работы вашего сервера разработки, Parcel автоматически обновляет ваше приложение в вашем браузере без необходимости обновления. Это часто называют горячей перезагрузкой. Таким образом, вам не нужно останавливать сервер, применять ваши изменения, а затем снова перезапускать сервер, чтобы просмотреть ваши изменения.

Например, когда сервер разработки Parcel запущен, вы можете изменить атрибут background в таблице стилей your_project/src/css/style.css. на красный и сохраните изменения. После сохранения вы сразу же заметите изменения в своем браузере без необходимости останавливать сервер разработки или обновлять его.

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

  1. npx parcel src/index.html



Output
❯ npx parcel src/index.html
Server running at http://localhost:1234
✨ Built in 5ms

Встроенный сервер разработки Parcel запущен. Команда npx посылка берет вашу точку входа src/index.html и создает ваше приложение с необходимыми активами. Вывод также указывает, что приложение работает на http://localhost:1234.

Чтобы просмотреть работающее приложение, откройте веб-браузер и перейдите по адресу http://localhost:1234:

В вашем каталоге your_project при выполнении команды npx plot были созданы две новые папки. Папка .parcel-cache содержит информацию о вашем проекте и используется Parcel для перестроения вашего приложения. Когда вы вносите изменения в свои файлы, Parcel обнаружит эти изменения и повторно запустит вашу сборку с этими файлами вместо того, чтобы начинать с нуля.

Другая папка, dist, содержит динамически сгенерированные файлы, созданные Parcel для вас. Обратите внимание, что эта папка содержит ваши файлы HTML, CSS и JavaScript, но все они называются index со случайными символами между ними. Он также включает файлы .map. Parcel создает так называемую исходную карту, когда вы используете команду npx plot. Исходная карта сообщает браузеру, как найти исходный код из вашего связанного кода. Он используется для помощи в отладке вашего кода в процессе разработки и производства:

Чтобы было ясно, вы не выполняете никакой работы в этих файлах. На самом деле, если вы удалите эти папки, папки .parcel-cache и dist будут автоматически созданы и обновлены при запуске пакета npx команда еще раз.

Примечание. Иногда при внесении значительных изменений в код вы можете заметить, что эти изменения не отражаются в браузере. Если это произойдет, вы можете попробовать обновить браузер. Если проблема не устранена, остановите работу сервера, нажав CTRL+C в терминале. Затем удалите папки .parcel-cache и dist. Папка .parcel-cache потенциально может содержать остатки старого кода, и, удалив ее, вы сможете устранить болевые точки. После их удаления снова запустите команду npx посылка src/index.html. Это заново создаст папки и файлы .parcel-cache и dist с вашим обновленным кодом.

Когда вы закончите изучение новых папок и файлов, остановите работу сервера, нажав CTRL+C в терминале или командной строке.

Шаг 4 — Создание сценариев npm для запуска и сборки вашего приложения

Вместо того, чтобы запускать команду npx посылка src/index.html внутри вашего терминала каждый раз, когда вы хотите проверить свой сервер разработки, вы можете создать сценарий npm внутри вашего package.json, чтобы запустить эту повторяющуюся задачу и автоматизировать этот шаг. Вы также можете включить дополнительный скрипт для сборки вашего приложения, когда вы будете готовы к работе.

Начните с открытия файла ваш_проект/package.json в текстовом редакторе.

Измените этот файл, включив в него следующие строки:

{
  "name": "your_project",
  "version": "1.0.0",
  "description": "",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build --dist-dir public"
  },
  "author": "",
  "license": "ISC"
  ...

В файле package.json вы заменили main: index.js на source: src/index.html. source указывает ввод или исходный файл вашего приложения и конкретный путь к файлу. Вы также включили следующие два скрипта:

  • start: parcel: start — это имя этой команды. Вы можете назвать это как угодно. parcel — это фактическая команда, которую вы хотите, чтобы ваш скрипт выполнял. В этом случае parcel делает то же самое, что и предыдущая команда npx packet. Он запускает сервер разработки с вашим файлом точки входа и строит его с включенными вами активами. Поскольку вы указали источник точки входа в поле source, Parcel понимает, где найти этот файл.
  • build: parcel build --dist-dir public: build — это имя этой команды, подобное start выше. . Вы можете назвать это как угодно. Команда parcel build создает и оптимизирует ваш код для производства. Обычно это запускается после того, как вы закончили разработку приложения. Каталог Parcel по умолчанию для вашего вывода называется dist. Тег --dist-dir public определяет выходную папку для ваших производственных файлов и называется public, чтобы избежать путаницы с каталогом dist по умолчанию. Вы выполните эту задачу позже.

Теперь вместо ввода npx посылки src/index.html в терминале для запуска сервера разработки вы можете ввести npm start:

  1. npm start



Output
❯ npm start

> your_project@1.0.0 start
> parcel

Server running at http://localhost:1234
✨ Built in 5ms

Команда npm start — это сокращенный способ запуска вашего сервера разработки.

Откройте веб-браузер и перейдите по адресу http://localhost:1234. Целевая страница вашего приложения должна быть такой же, как и раньше.

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

Шаг 5 — Создание приложения для производства

Одной из основных функций сборщика является объединение типов файлов. Это то, что Parcel делает для вас, когда вы запускаете команду build. Например, если у вас есть несколько файлов CSS, которые зависят друг от друга в вашем каталоге src/css, Parcel объединит эти файлы в один файл, когда вы используете npm run build команда. То же самое относится и к любому из ваших файлов JavaScript. Вы можете узнать больше о том, как Parcel это делает, изучив их документацию.

Когда ваше приложение будет готово к работе, используйте команду build, включенную в файл package.json, для создания рабочих файлов.

Во-первых, убедитесь, что вы находитесь в каталоге верхнего уровня, ваш_проект, затем введите следующую команду в свой терминал или командную строку:

  1. npm run build



Output
❯ npm run build

> your_project@1.0.0 build
> parcel build

✨ Built in 767ms

public/index.html            781 B    239ms
public/index.9daf4050.css    582 B     21ms
public/index.a9c94235.js     532 B    179ms

Как отмечалось выше, вывод Parcel по умолчанию для ваших файлов находится в папке dist. Поскольку вы указали скрипт build для вывода ваших файлов в каталог с именем public, Parcel создает эту папку и выводит в нее ваши производственные файлы. Файлы в этой папке отличаются от тех, когда вы находились в разработке, поскольку они объединены, минимизированы и дополнительно оптимизированы. Вы можете узнать больше о рабочих файлах и о том, что делает Parcel для оптимизации вашего кода, из их документации.

Например, если вы открываете файл public/index.html, код должен быть минимизирован:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/index.9daf4050.css"><title>Your Parcel Project</title></head><body><h1>Welcome to Parcel!</h1> <div class="sammy-wrapper"><div class="img-wrapper sammy-1"><img src="https://assets.linux-console.net/articles/docker_node_image/sammy.png" alt="Sammy the Shark"></div></div> <button>Change the Background Color</button> <script type="module" src="/index.a9c94235.js"></script></body></html>

Как и в случае с папкой dist, вы не выполняете никаких действий в каталоге public. Если вам нужно внести изменения в свой код, внесите изменения непосредственно в файлы в каталоге src.

Как и в случае с командой npm start, после внесения изменений вы можете пересобрать рабочие файлы с помощью команды npm run build. Ваша папка public и файлы в ней должны быть развернуты на веб-сервере, когда вы будете к этому готовы.

Вы создали и связали приложение с помощью Parcel.

Заключение

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

Если вы хотите узнать, как развернуть свое приложение, прочитайте наш учебник «Как развернуть статический сайт в облаке с помощью платформы приложений DigitalOcean».