Настройка хоста и порта

Установка Parcel

Parcel распространяется через npm и устанавливается как зависимость проекта. Чаще всего используется локальная установка, поскольку она обеспечивает воспроизводимость сборки и одинаковую версию инструмента для всех участников разработки.

Установка через npm:

npm install --save-dev parcel

Установка через Yarn:

yarn add --dev parcel

Установка через pnpm:

pnpm add -D parcel

После установки исполняемый файл Parcel становится доступен внутри каталога node_modules/.bin.

Структура минимального проекта:

project/
├── src/
│   ├── index.html
│   ├── index.js
│   └── styles.css
├── package.json
└── node_modules/

Пример содержимого файла package.json:

{
  "name": "parcel-project",
  "version": "1.0.0"
}

Первый запуск

Parcel работает по принципу «zero configuration» — большинство проектов запускаются без дополнительной настройки.

Файл src/index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Parcel App</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <h1>Parcel</h1>

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

Файл src/index.js:

console.log('Parcel работает');

Запуск сервера разработки:

npx parcel src/index.html

После запуска Parcel:

  • определяет точку входа;
  • запускает локальный сервер;
  • выполняет сборку ресурсов;
  • отслеживает изменения файлов;
  • автоматически обновляет браузер.

Обычно приложение становится доступно по адресу:

http://localhost:1234

Настройка команд в package.json

Для удобства работы команды запуска и сборки выносятся в секцию scripts.

{
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }
}

Теперь доступны команды:

npm run dev

и

npm run build

Режим разработки

Режим разработки предназначен для быстрого создания и тестирования приложения.

Команда:

parcel src/index.html

или

npm run dev

Особенности режима разработки:

  • быстрый запуск;
  • автоматическое обновление страницы;
  • отслеживание изменений файлов;
  • подробные сообщения об ошибках;
  • отсутствие агрессивной оптимизации.

При изменении любого файла Parcel пересобирает только необходимые части проекта.

Production-сборка

Для создания оптимизированной версии используется команда:

parcel build src/index.html

Или через скрипт:

npm run build

Во время production-сборки Parcel автоматически:

  • минимизирует JavaScript;
  • минимизирует CSS;
  • оптимизирует изображения;
  • удаляет неиспользуемый код;
  • создаёт хешированные имена файлов;
  • выполняет tree shaking.

Пример результата:

dist/
├── index.html
├── index.8a7d4f.js
└── index.2b1e91.css

Каталог выходных файлов

По умолчанию результат сборки сохраняется в каталог dist.

Изменение каталога осуществляется через параметр:

parcel build src/index.html --dist-dir build

Результат:

build/
├── index.html
├── index.js
└── index.css

Для режима разработки:

parcel src/index.html --dist-dir build

Настройка порта сервера

По умолчанию используется порт 1234.

Изменение порта:

parcel src/index.html --port 3000

После запуска приложение будет доступно по адресу:

http://localhost:3000

Настройка через скрипт:

{
  "scripts": {
    "dev": "parcel src/index.html --port 3000"
  }
}

Автоматическое открытие браузера

Parcel способен автоматически открывать браузер после запуска сервера.

parcel src/index.html --open

Также можно указать конкретный браузер:

parcel src/index.html --open chrome

Настройка точки входа

Parcel поддерживает различные типы входных файлов.

HTML:

parcel src/index.html

Jav * aScript:

parcel src/index.js

TypeScript:

parcel src/index.ts

React:

parcel src/index.jsx

Несколько точек входа:

parcel src/*.html

Пример:

src/
├── index.html
├── admin.html
└── profile.html

Команда:

parcel src/*.html

Parcel создаст отдельные сборки для каждой страницы.

Настройка через package.json

Большая часть конфигурации может храниться внутри файла package.json.

Пример:

{
  "name": "app",
  "version": "1.0.0",
  "source": "src/index.html"
}

Поле source определяет главный входной файл проекта.

Для сборки достаточно выполнить:

parcel build

Использование файла .parcelrc

Parcel предоставляет расширяемую систему конфигурации через файл .parcelrc.

Пример:

{
  "extends": "@parcel/config-default"
}

Этот файл позволяет:

  • подключать собственные трансформеры;
  • подключать дополнительные оптимизаторы;
  • изменять поведение сборщика;
  • создавать собственные плагины.

Типичная структура:

project/
├── .parcelrc
├── package.json
└── src/

Настройка алиасов

Алиасы упрощают импорт модулей.

Пример структуры:

src/
├── components/
│   └── Button.js
└── index.js

Настройка в package.json:

{
  "alias": {
    "@components": "./src/components"
  }
}

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

import Button from '@components/Button';

Преимущества:

  • сокращение длинных путей;
  • повышение читаемости кода;
  • упрощение рефакторинга структуры проекта.

Настройка переменных окружения

Parcel автоматически работает с файлами окружения.

Файл:

.env

Содержимое:

API_URL=https://api.example.com
APP_NAME=Parcel Application

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

console.log(process.env.API_URL);
console.log(process.env.APP_NAME);

Дополнительные файлы окружения:

.env
.env.local
.env.development
.env.production

Это позволяет использовать разные настройки для различных сред выполнения.

Настройка браузерной совместимости

Parcel использует Browserslist для определения поддерживаемых браузеров.

Настройка в package.json:

{
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "not dead"
  ]
}

Либо через отдельный файл:

.browserslistrc

Содержимое:

> 0.5%
last 2 versions
not dead

На основе этих настроек Parcel автоматически:

  • подбирает необходимые трансформации JavaScript;
  • генерирует совместимый код;
  • оптимизирует CSS.

Настройка целей сборки (Targets)

Targets позволяют создавать различные варианты выходных файлов.

Пример:

{
  "targets": {
    "modern": {
      "distDir": "dist/modern"
    },
    "legacy": {
      "distDir": "dist/legacy"
    }
  }
}

Сборка:

parcel build

Результат:

dist/
├── modern/
└── legacy/

Подобный подход используется для создания отдельных сборок под современные и устаревшие браузеры.

Настройка source maps

Source maps связывают скомпилированный код с исходниками.

По умолчанию в режиме разработки они включены автоматически.

Отключение:

parcel build src/index.html --no-source-maps

Явное включение:

parcel build src/index.html --source-maps

Преимущества source maps:

  • удобная отладка;
  • отображение оригинальных файлов в DevTools;
  • корректные номера строк при ошибках.

Настройка публичного URL

При размещении приложения не в корне сайта необходимо настроить базовый путь.

Пример:

parcel build src/index.html --public-url /app/

Результат:

<script src="/app/index.js"></script>

Это особенно важно при публикации приложения:

  • в подкаталогах веб-сервера;
  • на GitHub Pages;
  • в корпоративных порталах;
  • в CDN-инфраструктуре.

Настройка кэширования

Parcel активно использует кэш для ускорения сборки.

Каталог кэша:

.parcel-cache/

Структура проекта:

project/
├── .parcel-cache/
├── dist/
├── src/
└── package.json

Очистка кэша:

rm -rf .parcel-cache

Либо запуск без кэша:

parcel src/index.html --no-cache

Использование кэша существенно сокращает время повторных сборок крупных проектов.

Настройка режима подробного логирования

Для диагностики процесса сборки используется подробный вывод.

parcel build src/index.html --log-level verbose

Доступные уровни:

none
error
warn
info
verbose

Подробное логирование помогает:

  • искать причины ошибок;
  • анализировать время сборки;
  • отслеживать работу плагинов;
  • контролировать процесс оптимизации.

Настройка HTTPS-сервера

Для локальной разработки HTTPS поддерживается встроенными средствами Parcel.

Запуск:

parcel src/index.html --https

После запуска приложение будет доступно через:

https://localhost:1234

Использование HTTPS необходимо для тестирования возможностей браузера, требующих защищённого соединения:

  • Service Workers;
  • Web Push;
  • WebRTC;
  • некоторых API устройств.

Настройка игнорирования файлов

Parcel автоматически исключает из обработки файлы, которые не участвуют в графе зависимостей.

Дополнительно рекомендуется использовать файл:

.gitignore

Пример:

node_modules
dist
.parcel-cache

Это предотвращает попадание временных и сгенерированных файлов в систему контроля версий.

Типовая конфигурация проекта

Структура современного проекта на Parcel:

project/
├── .env
├── .gitignore
├── package.json
├── .parcelrc
├── .browserslistrc
├── src/
│   ├── index.html
│   ├── index.js
│   ├── styles.css
│   ├── assets/
│   └── components/
├── dist/
└── .parcel-cache/

Пример итогового package.json:

{
  "name": "parcel-app",
  "version": "1.0.0",
  "source": "src/index.html",
  "scripts": {
    "dev": "parcel",
    "build": "parcel build"
  },
  "alias": {
    "@components": "./src/components"
  },
  "browserslist": [
    ">0.5%",
    "last 2 versions",
    "not dead"
  ]
}

Такая конфигурация обеспечивает быстрый запуск проекта, поддержку современных инструментов разработки, автоматическую оптимизацию ресурсов и удобную организацию процесса сборки без необходимости создавать объёмные конфигурационные файлы.

Оглавление