ESBuild полный курс от А до Я. Замена Webpack 5?

39 985 просмотров • 3 июля 2022 г.

Ulbi TV

150 тыс. подписчиков

В этом ролике мы рассмотрим сборщик (бандлер) для frontend проектов ESBuild. Сравним его с Webpack 5. Разберем основные понятия loader, plugin, dev server, bundle, typescript, css, source map, minify и тд. Esbuild vs webpack. Webpack 5.

Patreon/boosty (доступ к бонусам) - https://boosty.to/ulbitv

Исходный код тут (github) - https://t.me/ulbi_tv/90
tsconfig - https://gist.github.com/utimur/0e47c843fb1d1fb23870d8e8ac5b4bb1

Доп. материалы:
Node js от А до Я - https://youtu.be/243pQXC5Ebs
Real time client-server - https://youtu.be/o43iiH4kGqg
Backend для начинающих (express) - https://youtu.be/tKM44vPHU0U

Таймкоды:
00:00 ➝ Введение и теория. Сравнение webpack и esbuild
06:00 ➝ Начало разработки. Установка, создание конфига. Основы. bundle, outdir.
09:40 ➝ Tree shaking
10:50 ➝ Минимизация бандла
11:30 ➝ Создание конфигурационного файла
14:20 ➝ Переменные окружения, production | development. Cross-env
17:00 ➝ Добавляем React и React-dom
19:45 ➝ Работа со стилями. CSS
21:40 ➝ Sourcemap. Карты исходного кода
23:50 ➝ Настраиваем дефолтный dev (serve) server
28:00 ➝ Production сборка
28:50 ➝ Подключаем TypeScript. Tsconfig.json
32:35 ➝ Переписываем конфиг на TS
36:05 ➝ Настраиваем loader для внешних файлов (png, svg, jpg ..)
38:20 ➝ Динамическое названия бандла. Боремся с кешированием
39:40 ➝ Создаем первый плагин. CleanPlugin. Работаем с файловой системой
44:30 ➝ Cоздаем свой dev-server. Express server. Watch mode. Раздача статики
48:35 ➝ Создаем второй плагин. HtmlPlugin
01:02:20 ➝ Hot reload. Event source. Server sent events
01:09:99 ➝ Итоги. Время ставить лайки и писать комменты :)

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

Patreon/boosty (доступ к бонусам) - https://boosty.to/ulbitv

Qiwi кошелек - http://qiwi.com/n/BODYE821
Яндекс деньги - https://yoomoney.ru/to/4100116193037469

parzival

08.09.22 в 18:47

5 webpack нужен, очень)

Fenreys

08.09.22 в 08:01

Привет, спасибо тебе большое, если у тебя будет такая опция - совмести postcss модули с esbuild, я уже пару дней ковыряюсь, сложна :с

Fenreys

08.09.22 в 08:01

Привет, спасибо тебе большое!

Braind_Bible

05.09.22 в 11:18

Спасибо, хочется посмотреть от тебя видео про сборщик Vite.

Дмитрий Меньшиков

02.09.22 в 06:01

Я хочу проголосовать за Vite

Sviataslau

30.07.22 в 17:39

Огромное спасибо за проделанную работу и потраченное время! Единственно остался вопрос про компиляцию препроцессоров в css, но смотрю что есть уже готовые плагины. Ждем ролик про пятый webpack

alexmeh

28.07.22 в 10:29

Нужен разбор webpack!

Андрей Проскурин

25.07.22 в 19:37

Понравилось! Интересно было узнать про лонгполлинг на express (правда юзер не очень будет рад такому обновлению). Не раскрыта тема с чанками бандла, когда файл большой и его хочется разбить на части.

Тарас Заславский

24.07.22 в 10:04

Спасибо! Всегда лайк твоим видео! Ты очень круто объясняешь!

TheAlektron4ik

20.07.22 в 10:12

Контент как всегда огонь!

Хотелось бы увидеть разбор Vite, преимущественно в связке с vue 3)

SHAB SHARO

18.07.22 в 02:12

Méga mozg)))

jorlyf

17.07.22 в 14:36

Если у Вас node выдает ошибку о превышении слушателей события refresh, то нужно их отписывать!! (иначе все перестает работать на 11 ребилде приложения)

решение:
// в dev конфиге
app.get("/subscribe", (req, res) => {
emitter.removeAllListeners("refresh"); // очистка всех старых подписчиков перед новой(актуальной) подпиской
.....
emitter.on("refresh", () => { ....... });
}

Averest

15.07.22 в 22:22

кстати, а что думаешь о Vite?

SnAtVB

15.07.22 в 21:41

vite - вайт
vite и parcel(парсель) - не сборщики,а агрегаторы :) они сами не собирают, а под капотом юзают rollup/esbuild/webpack

Кринж Кинж

13.07.22 в 17:06

Webpack 5 please !!

Сергей Ручейников

13.07.22 в 16:23

Спасибо тебе за видео, подробнее разбираешь чем на курсах, много нового извлек из твоего видео

Victor Mog

13.07.22 в 07:43

Тимур, может полную сборку ESBuild и делает быстрее WebPack (я не заметил и этого), но hotreload при development'е (который требуется на порядки чаще, чем полная сборка) - это трэш. Тем более с предложенной тобой схемой - через полный build...

Роман Кузнецов

13.07.22 в 05:15

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

zDobra Morda

12.07.22 в 18:58

Очень классная вещь! Очень удобно и очень быстрый рендер, завтра побегу пробовать на средних проектах! Спасибо большое за открытие новой технологии, теперь есть в чем потыкаться.
ESBuild пока так конфигурируемый будет удобен для малых и средних проектов, хотя надо тестить.
Благодаря твоему каналу я вижу куда расти! Спасибо тебе огромное, ты закрыл наверное 70% моих вопросов по технологиям.

Nick Gotton

12.07.22 в 14:23

Хороший обзор. Понял, что esbuild ещё слишком сырой и до webpack ему, как до Китая пешком.

Daniil

12.07.22 в 03:11

Для корректной работы проверки типов и т.п. в typescript нужно добавить перед esbuild в package.json это "tsc -noEmit && ".

Вот открывок из документации с переводом:
Этот загрузчик включен по умолчанию для файлов .ts, .tsx, .mts и .cts, что означает, что esbuild имеет встроенную поддержку для анализа синтаксиса TypeScript и отбрасывания аннотаций типов. Однако esbuild не выполняет никаких проверок типов, поэтому вам все равно нужно будет запускать tsc -noEmit параллельно с esbuild для проверки типов. Это не то, что esbuild делает сам.

Вот ещё открывок:
Однако esbuild в настоящее время проверяет только следующие поля в файлах tsconfig.json:
alwaysStrict
baseUrl
extends
importsNotUsedAsValues
jsxFactory
jsxFragmentFactory
paths
preserveValueImports
target
useDefineForClassFields

и т.е. если не сделать то что я написал то например опция "noImplicitAny": true будет проигнорированная esbuild, а после добавления той стрчоки будет работать компилятор ts и он это проанализирует. В конечном итоге сборка будет работать конечно медленей, но зато ваши настройки ts будут работать.

Mad world

11.07.22 в 01:14

Супер, спасибо за разбор, с нетерпением жду разбора webpack

Mikhail Blush

10.07.22 в 19:30

брат, жду видоса по вебпаку

Happy Homo

10.07.22 в 13:51

Ждем вебпак!

Virisound

09.07.22 в 20:59

Был бы здорово, если использовались дарк темы, чтобы глаза не резало.

Vladislav Balanov

09.07.22 в 08:54

Тимур, привет! Спасибо за ещё один крутой и полезный видос! И да, ролик по пятому вебпаку в связке с реактом очень нужен)

Александр Совгир

09.07.22 в 08:49

Топ контент! Только начал изучать что такое сборщики и тут это видео)

History

08.07.22 в 22:32

Голос ломается, тоже мало разговариваю, проблема вечная)

Windbog

08.07.22 в 14:51

Отлично объясняешь. Красава. Подписка.

Vova Sollo

07.07.22 в 18:18

Ну микрофронтенд module federation на вебпаке, так что все остальное не канает

Artyom Vashkevich

07.07.22 в 15:59

Vite использую и собирает обычно даже быстрее чем ESBuild. Но лично по собственным ощущениям. Наверное время сборки зависит и от проектов.

Pers1t

07.07.22 в 14:52

Не верю что npm run build может 25 минут занимать. Я такого за 10 лет не видел ещё

Лидия Лидия

07.07.22 в 12:24

Молодец, помогвешь!

AND96

07.07.22 в 09:07

Ulbi, когда выйдет твое видео по Angular? Очень жду:)

Artyom Sultanov

07.07.22 в 07:29

Зашёл сюда, чтобы поздравить автора канала с днём рождения! Спасибо тебе за весь твой труд!!!

Андрей Аникс

07.07.22 в 06:57

Вебпак нужен!!

____Twinkle____ [EQ-HQ]

07.07.22 в 02:16

Очень понравился урок. Просто и по полочкам. Интересно как скоро он войдет в практику как сборщик по умолчанию?

Neolisk

06.07.22 в 19:45

На Ангуляре не работает. Кроме того, необходимость создания HtmlPlugin наглядно показывает что тул сырой. Даже если скопипастить отсюда, не каждый захочет поддерживать этот код у себя в продакшне. Похвастаться сгодится, а в продакшне пока будет вебпак 5 + esbuild-loader где возможно, или просто вебпак 5 (например, в случае с Ангуляр).

Виктор Ляхин

06.07.22 в 18:07

Миллиард файлов, модулей, программ, консолей, команд для hello world ))

Vladimir Kudria

06.07.22 в 18:02

Кто объяснит преимущества перед vite?

Aleksandr Mayboroda

06.07.22 в 17:33

Я один в случае ошибки останавливаю ролик и начинаю искать причину?! А автор ее исправляет дальше...

Станислав Миляев

06.07.22 в 14:02

9:25 - увидим логохульбитовое )

Psixoz

06.07.22 в 13:29

Ждём разбор webpack 5

Константин Самолевич

06.07.22 в 09:57

Для Вебпака хочется увидеть видос с базисом. Что нужно чтобы начать и базовые финты. Возьми и пользуйся.
И отдельно - с продвинутыми заё6ами.

Саша Сашин

06.07.22 в 08:39

а можно ли учится javascript на w3school или на learnjavascript или на документация от разраба javascript так как лучше

Иван Иванов

06.07.22 в 08:36

простота ставиться в плюс esbuild, но при этом на такие вещи как работа html, hotreload(хотя хочется сразу hotreplacment) приходиться описывать руками. Где тогда просота?

Иван Иванов

06.07.22 в 08:36

простота ставиться в плюс esbuild, но при этом на такие вещи как работа html, hotreload(хотя хочется сразу hotreplacment) приходиться описывать руками. Где тогда простота?

Артём Беликов

06.07.22 в 07:39

автор так и не удалил вайп папки build из HTMLplugin

Виктор Бурнышев

06.07.22 в 07:20

Про webpack было бы отличное видео

Superwlad

06.07.22 в 05:48

Спасибо за ролик! Про webpack 5 и module federation было бы инртересно послушать!

Isa Abazov

06.07.22 в 01:10

Авторизация по номеру телефона и верификация смс на express ПОЖАЛУЙСТА

Isa Abazov

06.07.22 в 01:10

Авторизация по номеру телефона и верификация смс на express ПОЖАЛУЙСТА. Кому интересно ставим лайки

Dmitry Vasilevsky

05.07.22 в 22:34

Нет проверки Typescript, просто перегоняется в js всё. Поэтому такой и быстрый. Надо что-то самому изобретать чтоб выполнялся пребилд и ошибки выводились.
Ещё почему-то с nestjs не очень esbuild себя ведёт как-то, был проект на несте + пару AWS лямбд с простым кодом и импортом пару типов из проекта на несте, только импорт типов. Так вот AWS cdk не смог упаковать лямбду с помощью NodejsFunction (внутри используется esbuild), не могут зарезолвиться пару импортов хоть убейся.

Hexus Southpalmire

05.07.22 в 19:54

vue3 + webpack5 !!!

Den37

05.07.22 в 18:49

Спасибо за видос,вебпак было бы круто посмотреть в твоём обьяснении

Артем

05.07.22 в 17:57

Пока ты писал и переписывал html прямо в файле с настройками, у меня пошла кровь из глаз. Однозначно диз за то, что учишь людей говнокодить

L1s

05.07.22 в 15:10

Отличное видео, но количество велосипедов во второй части видео превышает разумные пределы)

Дмитрий Арефьев

05.07.22 в 13:24

Так скорость действительно в десятки раз выше? Не заметил сравнения.

Максим Исаев

05.07.22 в 11:39

Моё почтение!

Marian Malina

05.07.22 в 10:41

Webpack 5 +++

Влад Рачинский

05.07.22 в 09:15

ждем ролик по webpack

Дима Джунаев

05.07.22 в 08:35

Видео по Webpack 5 для верстки со всеми возможностями по оптимизации, как замену Gulp

baron_spam

05.07.22 в 07:38

Не все ли равно что там под капот vue-cli подсовывает )))))

Андрей Ращевский

05.07.22 в 06:53

Очень ждём Webpack 5 !)

Evan Komar

05.07.22 в 06:46

давай про webpack 5

Artem Sedliar

05.07.22 в 05:56

Vite более предпочтителен сегодня)

Dmitrii Forofontov

04.07.22 в 22:26

как же ничтожен этот один дислайк

MrPandaSmith

04.07.22 в 19:41

Остался, конечно, вопрос: а как заполифилить бандл?

Андрей Гуртовой

04.07.22 в 19:33

Жаль что конец видео изобилует велосипедами.

Спасибо за ролик.

Вопросец есть: каким образом есбилд ускоряет сборку, если под капотом он всё равно компилиует всё при помощи тайпскрипта?)
Хочется видео продвинутей. Без великов, и с плюхами в виде тестов тайпскрипт vs esbuild

Константин Родин

04.07.22 в 17:57

Спасибо огромное! плюсую за 5 webpack

Sergejs Stecenko

04.07.22 в 17:02

Большое спасибо за контент который ты делаешь!

И да, по Webpack хотелось бы послушать

JavaScripтизёр

04.07.22 в 15:51

vite для vue

Ruslan Show

04.07.22 в 14:46

Конечно нужен, твои фундаментальные ролики очень помогают в познании мира Веб- разработки

SMDB

04.07.22 в 14:35

Спасибо за отличное видео!

Ганс Форальберг

04.07.22 в 13:39

такой ролик нужен

Илья Матвицевский

04.07.22 в 12:07

Спасибо Тимур за твои труды! Очень интересный и полезный ролик. Ждем Webpack5, очень ждем)

Slava Lubenets

04.07.22 в 11:25

желательно использовать неймспесы для EvenetSource, мало ли..
ПС: по факту получается, что порог входа в webpack чуть выше, но если уж настроил - будет как часы, плюс комьюнити большое

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

04.07.22 в 11:07

Хорошо бы ещё тему монорепозиториев затронуть. Особенно полезно, когда есть несколько самописных npm библиотек на ts, которые нужно дебажить на ходу без пересборки всего проекта.

Влад Соболев

04.07.22 в 10:45

спасибо за ролик , жду видео про webpack

Shell Shell

04.07.22 в 10:16

Вебпак очень нужен! Отписался в комментах и лайк поставил :)

Андрей Потапов

04.07.22 в 10:16

сборщики - это своеобразная тема. Обычно посмотришь какой-нибудь курс, сделаешь сборку/две, а потом пылятся все твои знания несколько месяцев, т.к. работаешь на проекте и когда вновь наступает время настроить сборку, то уже не сильно помнишь, как там это всё делается, да + выясняется, что уже вышла новая версия или вообще вышел инструмент гораздо лучше. Поэтому если вам это не нужно, то лучше сильно не упарывайтесь по этому. Лучше тогда берите, что попроще. Какой-нибудь Parcel или Vite js

NiK0!as

04.07.22 в 10:13

Жду видос про WebPack :)

a.6lock prod.

04.07.22 в 10:02

Ждем Webpack!)

Денис Золотарев

04.07.22 в 09:47

Купи уже вебку для совместного стрима с Владиленом!) Я безработный и то имею вебку)

Вова Петров

04.07.22 в 08:52

Да, тема сборщиков классная. Лайк и комментарий за видос по Webpack.)

Сергей Кучияш

04.07.22 в 08:35

Нужен webpack 5. Очень крутые видео снимаешь !!

Ольга

04.07.22 в 07:55

Нужен ролик по вебпаку

fedoskamcha

04.07.22 в 07:48

Roman Gordeev

04.07.22 в 07:23

Тимур как всегда у руля

Сэм Фишер

04.07.22 в 06:35

вебпак мощная штука. вряд ли в ближайшее время его кто-то сместит, но появление альтернатив это всегда хорошо

nomad

04.07.22 в 06:34

Gulp забыл

Артем Филькевич

04.07.22 в 06:21

Лайк еще не глядя
Ждем webpack

Viktor Kushnirenko

04.07.22 в 05:45

Смотрю сравнение и понимаю что "медленный" - это не медленный. Это ведь не 4х часовая компиляция в машинный код. А инструменты у вебпака настолько сильные, что +/- крупные проекты другие сборщики не рассматривают.

Phantom

04.07.22 в 05:33

хороший ролик! автору респект

--

04.07.22 в 05:21

Очередное шедеврально-полезное видео. Благодарю, Тимур, за ваш труд)

Cuyl Shepherdton

03.07.22 в 23:55

Видео по webpack было бы супер!

skinny cain

03.07.22 в 22:56

видео по webpack пожалуйста

Андрей Александрович

03.07.22 в 22:20

Очень нужен ролик по webpack

Alexandr ex

03.07.22 в 22:03

За вебпак 5

Еж Ежиков

03.07.22 в 22:01

Webpack было бы прям очень интересно. Друзья давайте поддержим!

Рекомендации:

Ulbi TV

102 933 просмотра •

6 июня 2022 г.

Ulbi TV

78 169 просмотров •

2 апреля 2022 г.

Ulbi TV

51 175 просмотров •

11 марта 2022 г.

Ulbi TV

19 054 просмотра •

18 октября 2021 г.

Ulbi TV

11 469 просмотров •

12 ноября 2020 г.

Ulbi TV

11 634 просмотра •

16 ноября 2020 г.

Ulbi TV

18 679 просмотров •

20 ноября 2020 г.

Ulbi TV

17 205 просмотров •

9 декабря 2020 г.

Ulbi TV

15 039 просмотров •

24 декабря 2020 г.

Ulbi TV

9 955 просмотров •

30 декабря 2020 г.

Ulbi TV

26 144 просмотра •

2 января 2021 г.

Ulbi TV

14 640 просмотров •

18 января 2021 г.

Ulbi TV

33 940 просмотров •

6 февраля 2021 г.

showinfo=0 controls=1 rel=0 iv_load_policy=3