Некоторым разработчикам нравится писать ванильный JS, но некоторые вынуждены использовать фреймворк, такой как Vue, Angular, React e.t.c, потому что он поставляется с бандлером, таким как Webpack, некоторые на самом деле не знают, как реализовать бандлер изначально. С помощью этой статьи вы сможете фактически объединить свой проект javascript, не полагаясь на какие-либо рамки.

Что такое ParcelJS?

ParcelJS - это сборщик веб-приложений, отличающийся опытом разработки. Он предлагает молниеносную производительность при использовании многоядерной обработки и не требует настройки. С parcel вам не нужно настраивать какую-либо конфигурацию или какой-либо загрузчик для CSS, JS, ресурсов и т. Д.

Почему вам следует использовать Parcel

  • Нулевая конфигурация:
  • Представление
  • Замена горячего модуля
  • Разделение кода
  • Поддержка многих типов активов

Начать работу с ParcelJS

Инициализировать npm для создания файла package.json

npm init -y

Установите ParcelJS Bundler как глобальный пакет
с помощью npm

npm install -g parcel-bundler

с использованием пряжи:

yarn global add parcel-bundler

Как служить вашему проекту

ParcelJS может использовать любой тип файла в качестве точки входа для обслуживания, но рекомендуется использовать ваш файл HTML / jS, например index.html / index.js, about.html / about.js.
вы можете обслуживать свои файлы с помощью следующая команда:

посылка имя_файла.расширение

parcel index.html

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

parcel watch index.html

вы также можете просматривать файлы с несколькими записями с помощью parcel watch file1, file2 .. file N

parcel index.html about.html service.html contact.html

Импорт актива в ваш проект

Вы можете импортировать различные типы ресурсов, такие как (CSS, SCSS, LESS, STYLUS, Images и т. Д.), В любой JavaScript.

CSS

import ‘./style.css

SCSS

import ‘./style.scss`

NB: для компиляции SCSS вам необходимо установить пакет npm под названием sass

npm install -D sass

JAVASCRIPT

//ES6 Import 
import ‘./script.js

or

//commonJS module
const script = require(‘./js/script’);

Готовим ваш проект к производству

Чтобы связать свой проект для производства, вам не нужно выполнять какую-либо настройку или напрягаться, Parcel автоматически определит все ваши файлы в вашем проекте (* js, * css, * scss, * jpg, * png, * svg и т. Д. ) и свяжите для вас все, что вы можете запустить в производство. используйте следующую команду для запуска процесса сборки.

parcel build index.html

Демо
Создайте простой проект, который выбирает пользователя из [Randomusers] (https://randomuser.me/) и отображает его на экране.

Сначала позвольте установить parcel-bundle как зависимость разработчика, потому что пакет нужен нам только на стадии разработки, он не пойдет с нашей производственной сборкой. Но если вы установили его как глобальный пакет, вам не нужно устанавливать его снова. если у вас нет, вы можете установить как зависимость разработчика или глобальную зависимость.

npm install -D parcel-bundler

затем создайте файлы index.html и index.js в корневом каталоге, index.html будет нашей отправной точкой, потому что браузер может рисовать только элементы / ресурсы в файле HTML на экране. Файл index.js будет корнем, в котором будет подключать все наши страницы / компоненты к DOM.

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

NB: вы можете структурировать проект по своему усмотрению. Самое главное, когда вы импортируете файлы, убедитесь, что ваш путь правильный.

в файл index.html позвольте включить наш файл index.js, разметка должна выглядеть, как показано ниже.

<!DOCTYPE html>
<html lang=”en”>
 <head>
 <meta charset=”UTF-8" />
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
 <meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
 <title>Parcel Tutorial</title>
 </head>
 <body>
 <script src=”index.js”></script>
 </body>
</html>

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

“scripts”: {
 “dev”: “parcel index.html”,
 “build”: “parcel build index.html”
 }

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

Добавление нашего Javascript в нашу папку Pages

давайте создадим файл с именем users.js, он будет экспортировать функцию, которая будет использовать API из [Random Users] (https://randomuser.me) и вернуть список пользователей.
который мы можем позже импортировать и повторно использовать в любом месте нашего приложения.

export const users = () => fetch(“https://randomuser.me/api/?results=10").then(res => res.json())

Добавление CSS в ваш проект.

Лично я всегда создаю отдельный файл CSS для каждого компонента / страницы. например home.css, about.css и т. д. и каждый компонент / страница в отдельной папке. Но ради этого урока, чтобы не усложнять его. Я просто использую один компонент / страницу. Вы можете следовать шаблону и подходу, который работает для вас. Важно, когда вы импортируете файл, убедитесь, что ваш путь всегда правильный.

давайте создадим еще один файл с именем home.js, который будет компонентом / страницей, в которой будут перечислены наши пользователи. скопируйте приведенный ниже фрагмент в файл.

.title {
  color: #fff;
  margin-bottom: 2rem;
  text-align: center;
}
.userAvatar {
  border-radius: 50%;
}
.user {
  list-style: none;
  display: flex;
  padding-left: -2rem;
  /* padding: 0; */
  margin-left: -2.5rem;
  padding: 10px;
&:not(:last-child) {
 border-bottom: solid 1px #ccc;
 }
 &-details {
 margin-left: 10px;
 margin-top: 4px;
 }
&-name {
 font-weight: bolder;
 font-size: 18px;
 }
 &-email {
 font-style: italic;
 }
}
body {
 background-color: rgb(131, 4, 153);
 font-size: 16px;
}
.users {
 width: 40vw;
 margin: auto;
 border: 1px solid #ccc;
 border-radius: 10px;
 background: #fff;
}
.loader {
 color: #fff;
 font-size: 30px;
 font-weight: bolder;
 position: absolute;
 top: 50%;
 left: 50%;
 translate: (-50, -50);
 z-index: 1000;
}

После того, как вы создали нашу таблицу стилей и файл users.js со списком пользователей из https://randomuser.me. позвольте импортировать нашу таблицу стилей и пользователей в наш файл main.js.

полный исходный код home.js ниже.

после того, как мы создали наш home.js и вставили указанный выше исходный код в файл, посмотрите, где мы объявляем домашнюю функцию, мы экспортируем функцию, то есть мы должны использовать ее в другом месте (повторно использовать).

перейдите в файл index.js, который мы создали ранее, который станет отправной точкой нашего проекта. если вы помните, мы включаем index.js в наш index.html. это файл index.js, который загрузит файл index.html, и файл index.js фактически будет использовать каждую создаваемую страницу.

import { home } from “./pages/home”;
const app = document.createElement(“div”);
app.setAttribute(“id”, “app”);
app.appendChild(home());
document.body.appendChild(app);

NB: По сути, файл index.js собирает представление, созданное на странице home.js, и добавляет его в тело документа. т.е. (экран браузера).

Запуск вашего приложения

Чтобы запустить ваше приложение, мы выполним созданную ранее команду сценария npm.

npm run dev

NB: если в вашем проекте возникла ошибка, вызванная синтаксисом ES7, используемым в проекте. вы можете попробовать установить следующие пакеты npm @ babel / core и @ babel / plugin-transform-runtime

npm install -D @babel/core @babel/plugin-transform-runtime

затем создайте файл .babelrc в корневой папке проекта, сообщающий вашему проекту, что он должен использовать один из плагинов времени выполнения babel transform, который преобразует ES7 в то, что может понять ваш браузер. используйте нижеприведенный фрагмент.

{
 “plugins”: [“@babel/plugin-transform-runtime”]
}

Результат демонстрации ниже

Объединение вашего приложения в производство.

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

npm run build

Заключение.

Основная цель этой статьи - познакомить вас с ParcelJs и начать работу с ParcelJs. С помощью этой статьи вы сможете разработать и развернуть любой проект javascript в производственной среде. parcel js помогает уменьшить размер вашего приложения.

Вы можете найти демо для этого проекта ниже



Учебное пособие по Parcel
Простая демонстрация бандера ParcelJS qyib9.csb.app



[Репозиторий Github]



DAMMAK / ParcelJS-bundler-demo
В настоящее время вы не можете выполнить это действие. Вы вошли в систему с другой вкладкой или окном. Вы вышли из аккаунта на другой вкладке или… github.com



* NB: *, * если у вас есть вопросы или какая-то часть непонятна. вы можете оставить его в поле для комментариев. Я всегда к вашим услугам. *