Привет! Итак, вы хотите знать о посылке, верно? Ну, вы находитесь в правильном месте для этого. В этой статье в блоге мы собираемся проанализировать, что это такое, и, надеюсь, вы станете ярче с другой стороны или внизу, когда закончите читать этот блог 😉
Прежде чем углубиться в посылки, мы должны сначала узнать, что такое сборщик модулей. В современной разработке программного обеспечения, особенно в Javascript, код разделен на крошечные повторно используемые компоненты, называемые модулями, которые можно разрабатывать, тестировать и поддерживать отдельно. Сборщик модулей берет эти отдельные модули и объединяет их в один выходной файл, который можно использовать в веб-приложении. Сборщик анализирует зависимости между модулями и обеспечивает их загрузку в правильном порядке. Он также выполняет оптимизации, такие как минимизация кода и встряхивание дерева, чтобы уменьшить размер файла и повысить производительность.
Итак, что такое посылка ❓
Я знаю, сознательно или неосознанно вы определенно использовали сборщик модулей раньше. и это именно то, что Parcel. Parcel — это инструмент для сборки, который помогает разработчикам упаковывать и создавать свой код JavaScript и другие ресурсы, такие как таблицы стилей и изображения, для развертывания в рабочей среде.
Parcel — это инструмент с открытым исходным кодом, который впервые был выпущен в 2017 году. Его наиболее эффективным преимуществом является шаг нулевой настройки, который позволяет использовать его на лету без какой-либо настройки. Вот еще его особенности
- Настройка нулевой конфигурации — я объяснял это раньше. Parcel автоматически определит тип файлов, с которыми вы работаете, и соответствующим образом настроит процесс объединения. Это упрощает начало работы с Parcel и сокращает время и усилия, необходимые для настройки проекта.
- Поддержка нескольких типов файлов — Parcel поддерживает JS, typescript, HTML CSS и многие другие типы файлов. Вы не ошибетесь с этим.
- Встроенный сервер разработки — Parcel имеет встроенный сервер разработки, который позволяет вам просматривать ваш проект в режиме реального времени во время процесса разработки. Он поддерживает HMR (горячая замена модуля), что означает, что вы можете видеть вносимые вами изменения в режиме реального времени без необходимости обновлять браузер. Эта функция может сэкономить много времени и усилий в процессе разработки.
- Разделение кода — Parcel включает встроенную поддержку разделения кода, которая представляет собой способ разделения вашей кодовой базы на более мелкие фрагменты, которые можно загружать по требованию, что значительно повышает скорость загрузки вашего приложения.
- Оптимизация производительности — Parcel включает модификацию кода, то есть процесс уменьшения размера кода путем удаления ненужных элементов, таких как комментарии и пробелы. Он также поддерживает встряхивание дерева, которое представляет собой метод, который идентифицирует и удаляет неиспользуемый код, что значительно повышает производительность.
Теперь я хочу использовать его 😢
Я знаю, что ты знаешь, может быть, ты даже используешь это, чтобы узнать это, но я все равно научу тебя.
Первый шаг
- Установить Parcel — первый шаг — установить Parcel. Вы можете сделать это с помощью менеджера пакетов, такого как npm или yarn. Например, чтобы установить Parcel с помощью npm, вы можете запустить следующую команду:
npm install -g parcel-bundler
2. Создайте новый проект — после установки Parcel вы можете создать новый проект, создав новый каталог и добавив в него несколько файлов. Например, вы можете создать новый каталог с именем «мой-проект» и добавить в него файл HTML, файл CSS и файл JavaScript.
3. Добавьте код. Затем вы можете добавить код в свои файлы. Например, вы можете добавить HTML-разметку в HTML-файл и несколько стилей CSS в свой стиль CSS. Просто напишите что-нибудь пока.
4. Объедините свой код. Вся суть этого блога, верно? Чтобы связать свой проект, просто запустите приведенный ниже код в корне вашего проекта.
parcel index.html
Это запустит процесс объединения и создаст новый выходной файл в каталоге с именем «dist». Выходной файл будет содержать все зависимости, необходимые для вашего проекта, оптимизированные и готовые к доставке в веб-браузер.
5. Предварительный просмотр вашего проекта. После завершения процесса объединения вы можете просмотреть свой проект, открыв выходной файл в веб-браузере. Вы также можете использовать встроенный сервер разработки, предоставляемый Parcel, выполнив следующую команду:
parcel serve index.html
Это запустит сервер разработки и бум, вы это сделали! Большое спасибо за то, что сделали это таким далеким человеком, которого вы действительно качаете. Увидимся завтра на 50-й день. Я так же взволнован этим, как и вы 😎😍.
