Въведение в Parcel.js, пакета за уеб приложения No-Config

Тази публикация е вашето въведение в Parcel.js, самопровъзгласената "пламна бърз, нулева конфигурация на уеб приложението." Ето всичко, което трябва да знаете, за да започнете с него:


Много разработчици на преден план са се разочаровали от някои сложности, свързани с изграждането на уеб приложения днес. Доста стандартна практика е да се включи някакъв инструмент за изграждане или групиране в работен процес от предния край, така че много разработчици са разгледали използването на преден инструмент като webpack.

WebPACK е най-популярният пакет и той следва по петите на Require.js, Rollup и подобни решения. Но кривата на обучение за инструмент като уебпакет е стръмна. Започването с уебпакет не е лесно поради сложните му конфигурации. В резултат на това през последните години се появи друго решение. Този инструмент не е непременно преден бегач, а по-лесна за усвояване алтернатива на пейзажа на предния модул на пакета на модула. Представяме Parcel.js.

Въведение в Parcel.js

Parcel.js (parceljs.org) е точно това, което мнозина начинаещи до междинни разработчици искат: Прост пакет с ниска конфигурация, с който можете бързо да ставате и работите.

Надявам се, че този урок за колета ще осигури лесно следване въведение към този инструмент. Ще покрия основните положения и тогава ще ви покажа как да използвате Parcel за свързване на обикновено уеб приложение, което включва Babel и Sass.

�� Съдържание:

  1. Защо да използвате пакет за уеб приложения? #
  2. Инсталиране на Parcel.js #
  3. Създаване на точка за въвеждане на файл #
  4. Dist / папка №
  5. Използване на Parcel.js с Babel #
  6. Използване на Parcel.js с Sass #
  7. Групиране на множество скриптове с парцел №
  8. Разделяне на код с Parcel.js #
  9. Производството се изгражда с Parcel.js #
  10. Някакви недостатъци при използването на Parcel? #

Уебсайт Parcel.js

Защо да използвате пакет за уеб приложения?

Няма да отделя прекалено много време за обсъждане на причините за използването на пакет за приложения като Parcel.js, защото тази тема със сигурност е била разгледана и преди. Но ето основна възможност за ползване от използването на такъв инструмент:

  • Приложението ви ще има по-малко HTTP заявки поради комбиниране на скриптове или стилове
  • Сценариите и таблиците със стилове могат да се зареждат при поискване, като допълнително подобряват производителността
  • Сценариите и таблиците със стилове могат да бъдат автоматично минимизирани, за да доставят по-малко килобайти на потребителя
  • Работата по свързване и минимизиране се извършва автоматично от инструмента, като се намалява ръчната работа
  • Файловете за разработка се организират модулно, което прави кода ви много по-лесен за поддържане и отстраняване на грешки

Както можете да видите, предимствата са много и са свързани най-вече с изпълнението и поддръжката на проекта. Със сигурност има много причини да използвате пакет, ако това е нещо, което все още не сте обмисляли.

Като избягваме това, нека започнем с основите за ставане и работа с Parcel.js. Бавно ще прегледам функциите в този урок, като използвам няколко прости примера, които лесно ще можете да следвате.

Инсталиране на Parcel.js

Можете да инсталирате Parcel.js във вашия терминал с помощта на Прежда или npm. За този урок ще използвам npm. Ето командата да го инсталирате глобално, за да можете да го използвате във всеки проект:

npm инсталирайте пакет-bundler -g

Флагът -g го инсталира глобално. Ако искате да го инсталирате само за един проект и да го добавите към devDependitions на вашия проект в package.json, можете да стартирате същата команда в основната папка на проекта, използвайки флаг –save-dev вместо -g:

npm инсталиране на колети-пакети –save-dev

С глобалната инсталация (която ще бъде най-често използваният случай) можете да стартирате всеки даден проект с помощта на командата init. Използвайте терминала, за да отидете до папката, която искате да използвате като корен на приложението си и стартирайте:

npm init -y

Флагът -y не позволява на npm да задава въпроси, като използва настройките по подразбиране за настройката. Ако приемем, че проектът ми се нарича parcel-demo, това създава файл package.json в корена, който изглежда така:

{
"име": "колет-демо",
"версия": "1.0.0",
"описание": "",
"основен": "index.js",
"скриптове": {
"тест": "ехо \"Грешка: не е посочен тест \" && изход 1"
},
"ключови думи": [],
"автор": "",
"Разрешително": "ISC"
}

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

Създаване на точка за въвеждане на файл

За основна настройка на проекта ще използвам Parcel.js във файл index.html, който сочи към първичен JavaScript файл, наречен index.js (както е показано във файла package.json). Този HTML файл ще служи като моя входна точка за колети. Моят HTML файл ще има елемент на скрипт, който сочи към моя JavaScript файл, така че ще изглежда така:

HTML>
<HTML>
<глава>
<заглавие>Демонстрация на колети>
глава>
<тяло>
<скрипт src ="./js/index.js">писменост>
тяло>
HTML>

След като разполагам с правилния HTML и JavaScript файл, мога да стартирам вградения сървър за разработка на Parcel, като пусна следното в моя терминал в папката на моя проект:

parcel index.html

Това стартира сървъра и му казва какъв файл да използва като входна точка. В резултат на това получавам следното съобщение в терминалната си сесия:

Сървър работи на http: // localhost: 1234
√ Вграден в 887ms.

Вече мога да отворя http: // localhost: 1234 / в браузъра си, за да видя какво съм изградил досега. Сървърът на живо използва презареждане на живо и нещо наречено подмяна на горещ модул. Това автоматично ще актуализира модули на страница, без да прави цялостно обновяване на страницата. По този начин аз виждам напредъка на моето изграждане с по-бързи стъпки, докато работя.

След като Parcel.js работи с неговия сървър активен, всички промени, направени във файл, автоматично ще възстановяват приложението ми всеки път, когато файлът бъде запазен. За да видя това в действие, ще добавя обикновен ред на дневника на конзолата в моя скрипт. Това ще задейства следното съобщение в моя терминал:

$ parcel index.html
Сървър работи на http: // localhost: 1234
√ Построен за 1,08 сек.
√ Вграден за 28ms.

Всеки ред „Вграден…“ представлява едно изграждане, задействано от промяна в съдържанието и запазване.

Ако искам да използвам собствен сървър, а не вградения сървър за разработка на Parcel, мога да използвам командата за гледане:

колетен часовник index.html

Получавам същия резултат в терминалната си сесия, като Parcel.js изгражда приложението ми, след което чака промени:

$ parcel watch index.html
√ Построен за 855ms.

Dist / папка

След като стартирах Parcel.js или в режим на гледане, или чрез вградения сървър, ако погледна в папката на моя проект, ще видя папка и структура на файла като следното:

index.html
package.json
JS /
└───── index.js
дистрибуция /
└───── index.html
└───── js.00a46daa.js
└───── js.00a46daa.js.map

Забележете папката dist, която се създава автоматично. Тук са моите производствени файлове; Не докосвам нито един от тези файлове. Забележете, че моята колета с пакети автоматично преобразува файла ми index.js в такъв с уникална удобна за кеш версия (с преработено или „revved“ име на файл). Към него е добавен и файл с изходна карта (можете да прочетете за източни карти в тази публикация).

Ако потърся файла ми index.html в папката dist, ще видя следното:

HTML>
<HTML>
<глава>
<заглавие>Демонстрация на колети>
глава>
<тяло>

<скрипт src ="/js.00a46daa.js">писменост>
тяло>
HTML>

Забележете правилно и удобно дист версията на файла ми index.html, насочен към дистрибуторската версия на моя .js файл.

Ако моят уебсайт включва множество файлове, които сочат към едни и същи скриптове (например about.html, contact.html и т.н.), мога да използвам следната команда:

parcel index.html about.html contact.html

Това казва на Парцел, че искам да използвам няколко входни точки, за да се изгради от. Мога да използвам следната команда да кажа на Parcel.js да използва всички мои HTML файлове като входни точки:

колет * .html

Използване на Parcel.js с Babel

Parcel.js има вградена поддръжка за различни кодови транспилатори, включително Babel, популярният инструмент за конвертиране на модерен JavaScript от следващо поколение в еквивалентен код, който може да бъде разбран от всички браузъри. Тъй като Babel е вграден в Parcel.js, нямате нужда от специален плъгин, за да го използвате, той просто работи. Нека да разгледаме пример.

Ще добавя следния код във файла ми index.js:

функция getInfo (име, година = 2018, color = ‘blue’) {
console.log (име, година, цвят);
}

getInfo (‘Chevy’, 1957, ‘Green’);
getInfo (‘Benz’, 1975);
getInfo ( “Honda”);

Този код използва ES6 функция, наречена параметри по подразбиране, което можете да видите конкретно във функционалната глава. По-старите браузъри не поддържат параметри по подразбиране за функции. За да се уверите, че кодът не хвърля грешка, имам нужда от Babel, за да транспилирам кода в еквивалентен код, който работи във всички браузъри. След като запазя файла ми index.js, Parcel.js ще възстанови приложението ми и ще създаде следното вместо кода ES6, който написах:

функция getInfo (име) {
var година = аргументи. дължина > 1 && аргументи [1]! == неопределени? аргументи [1]: 2018;
var color = argument.length > 2 && аргументи [2]! == неопределени? аргументи [2]: ‘син’;
console.log (име, година, цвят);
}

getInfo (‘Chevy’, 1957, ‘Green’);
getInfo (‘Benz’, 1975);
getInfo ( “Honda”);

Можете да използвате онлайн отблъскването на Babel за тествайте това.

И забележете най-важния фактор тук: Не съм направил нищо, за да инсталирам или конфигурирам Babel – той просто работи извън кутията като част от настройката по подразбиране на Parcel! Разбира се, може да искате да добавите някои опции за конфигуриране, за да промените Babel, за да направите това, което искате. В такъв случай можете да добавите .babelrc файл в основната папка на вашия проект с включени настройки за конфигурация. Можете да прочетете повече за използвайки .babelrc файл на уебсайта Parcel.js.

Използване на Parcel.js със Sass

Подобно на Babel, Parcel също по подразбиране автоматично ще компилира моите SCSS (Sass) файлове във валиден CSS. За да демонстрирам това, ще добавя папка, наречена „css“, в корена на моя примерен проект. В тази папка ще добавя style.scss файл със следния Sass код:

тяло {
цвят черен;

.модул {
цвят: червен;
}
}

Използвам функцията за влагане на селектор на Sass. Ще добавя следния ред към раздела на моите HTML файлове:

<връзка rel ="стилове" HREF ="./css/style.scss">

След като всичките ми файлове бъдат запазени, Parcel ще произведе нова версия в моята dist / папка с компилиран CSS файл, който преобразува SCSS в следното:

тяло {
цвят черен;
}
тяло .модул {
цвят: червен;
}

Докато имам Sass инсталиран на моята система в световен мащаб, Parcel ще направи това автоматично, без да е необходима конфигурация. Ако нямам глобална инсталация на Sass, няма проблем. Мога просто да напиша своя SCSS, след това да стартирам Parcel и Parcel ще инсталира Sass автоматично като зависимост от конкретния проект. Много удобно! И отново това е особено полезно, тъй като не изисква никаква конфигурация.

И точно както с Babel, мога да избера да отида с каквито и да е опции за конфигурация по подразбиране, които идват със Sass. Или мога да създам .sassrc файл в корена на моя проект и да добавя моите собствени конфигурации.

Групиране на множество скриптове с колет

Засега примерите, които ви показах, са само за да ви накарат да работите с Parcel, така че можете да получите основна представа за това как функционира. Както споменахме по-рано, силата на всеки пакет е възможността автоматично да комбинира множество файлове в един файл. Това помага за намаляване на HTTP заявките и подобряване на скоростта на вашия уебсайт или приложение.

Всичко, което съм демонстрирал досега, може да се направи с помощта на множество скриптове, които се използват чрез модулната функция на ES6. Това ми позволява да създавам и импортирам скриптове по модулен начин. Това прави кода ми лесен за поддържане, докато все още обслужва само един пакет скрипт в производството.

За да демонстрирам това, ще добавя отделен файл, наречен module.js, който ще съдържа следния JavaScript:

експортиране нека цвят = ‘зелен’;

функция за износ добавяне (n1, n2) {
връщане n1 + n2;
}

Това е само някакъв основен код за експортиране на два обекта: Променлива и функция. Във файла ми index.js ще импортирам тези ресурси със следния код:

import {color, add} от ‘../js/module.js’;

console.log (цвят); // "зелен"
console.log (добавяне (20, 40)); // 60

Отново това е просто основен синтаксис на модул ES6. Няма да навлизам в подробности как става това тук. Хубавата част от това е фактът, че не трябваше да посочвам в моя HTML файл, че използвам модул. Обикновено тагът ми за скрипт ще изглежда така с атрибута type, зададен на модул:

<скрипт src ="./js/index.js" тип ="модул">писменост>

Но това не е необходимо. Parcel разпознава модула, който се импортира, и свързва двата ми скрипта в един лесен за производителност ресурс. Това се случва без специална конфигурация или плъгини. И точно както в по-ранните примери, кодът се трансформира с помощта на Babel в ES5-еквивалентен код, който ще ми даде най-голямата поддръжка на браузъра.

Разделяне на код с Parcel.js

Още една функция в Parcel, която работи без никаква конфигурация, е разделяне на код. В някои случаи ще искам всичките ми модули да се зареждат на всичките ми страници. Но в други случаи може да искам да заредя само определени модули на определени страници, в определени контексти. Това ми позволява разделянето на кода.

По-рано споменах, че примерният ми проект включва три страници: index.html, about.html и contact.html. Нека да кажем, че искам да пусна един и същ пакет на JavaScript и на трите страници, но на страницата about.html имам бутон, който задейства нещо конкретно. Но искам този код да се зареди само при натискане на този бутон.

Ето как може да изглежда този код с помощта на функцията за разделяне на кода:

ако (document.querySelector (‘. about’)) {
document.querySelector (‘. about’). addEventListener (‘click’, () => {
внос ( “../ JS / about.js”). След това (
document.body.innerHTML + = ‘За страницата актуализирана’;
);
});
}

Забележете, че това включва нова функция на JavaScript, динамичен внос използвайки функцията import (). Това ми позволява динамично да зареждам кода, който искам в конкретен случай. В този случай го правя, когато се натисне бутон на страницата с информация. Функцията import () връща обещание, така че мога да правя каквото си поискам в клаузата .then (), която се задейства, след като се зареди импортираният скрипт. Скриптът about.js се зарежда при поискване и този код ще бъде транспониран от Babel в кръстосан браузър ES5, за да се гарантира, че работи навсякъде. Когато моят пакет се създаде, частта about.js се поставя в свой собствен файл в dist / папка, за да може този файл да бъде зареден при поискване.

Подобно на други функции, които обсъдих, функцията import () работи в Parcel без никаква конфигурация.

Производството се изгражда с Parcel.js

Досега произвеждах всички мои пакети на Parcel в движение, използвайки вградения сървър, който се предлага с Parcel и който включва презареждане на живо. Всеки път, когато запазя проекта си, пакетът ми се изгражда. Но кодът винаги е бил в пакет за текущо развитие. По този начин мога да преглеждам или проверявам източника според нуждите за извършване на грешки.

След като проектът ми е завършен и готов да бъде избутан на жив сървър, мога да спра Парцел да гледа моя проект. CTRL-C в терминала прави това на много платформи. Тогава ще изпълня следната команда, за да кажа на Parcel да произведе едно окончателно изграждане:

parcel build index.html about.html contact.html

В този случай изграждам от трите си входни файла. След като това е направено, Парцелът вече не чака промени; окончателният пакет е изграден и това е всичко. В допълнение към изграждането се финализира, моят код се подготвя за производство от Parcel. HTML, CSS и JavaScript са минимизирани, за да създадат най-малките възможни файлове за оптимизирана производителност.

Всички недостатъци при използването на Parcel?

Парцелът определено трябва да бъде най-добрият избор за тези, които имат малък или никакъв опит с инструментите за изграждане. Но в собствените си изследвания открих няколко неща, които мога да спомена, които трябва да бъдат подобрени в бъдеще.

На първо място, ще забележите, че Parcel винаги поставя вашите пакетни скриптове и таблици стилове в същата директория като HTML файловете за входна точка. Това се случва дори ако имате вашите CSS и JavaScript файлове в отделни папки. Тъй като това са производствени файлове, това може да не е от голямо значение. Но това е нещо, което трябва да имате предвид Добрата новина е това изглежда е поправен в предстоящата версия 2 на колет (все още в Alpha). Така че трябва да има начин да се отмени това поведение, когато тази версия на Parcel е стабилна (текущата стабилна версия е 1.12.4).

Друг недостатък е, че установих, че документацията на Parcel е доста минимална, що се отнася до информация за персонализиране на опциите за конфигурация за различните функции. Вярно е, че едно от огромните предимства на Parcel е това колко добре се работи на открито. Но мисля, че малко по-обширна документация за персонализирането му би била полезна. Например, как да деактивирам минимизирането на HTML в моите компилации, като същевременно поддържам CSS и JavaScript минимизацията? Не виждам описание на това в документите. Когато разгледах затворените издания на GitHub, има решение (мислех, че не е много удобно).

заключение

Последно нещо, което ще спомена, е инструмент, наречен Създайте приложение, които можете да използвате за автоматично създаване на конфигурационни файлове за Parcel. Той ви позволява да изберете вашата библиотека, транспилер, линтер и т.н., и всички те ще бъдат добавени към файла на пакета.json, готов за инициализация.

Създайте приложение в Parcel.js

Това е това за този урок за колета за начинаещи. Надявам се, че ще можете да използвате тази информация, за да стартирате и стартирате бързо с Parcel и да я използвате в бъдещи проекти. И ако сте нов в групирането на приложения или никога не сте го изпробвали в нито един проект, може би това въведение ще ви вдъхнови да опитате Parcel.

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Оформление и представяне от Карол К.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map