ESBuild полный курс от А до Я. Замена Webpack 5?
39 985 просмотров • 3 июля 2022 г.

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
1 857
0
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
Я один в случае ошибки останавливаю ролик и начинаю искать причину?! А автор ее исправляет дальше...
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 !)
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 было бы прям очень интересно. Друзья давайте поддержим!
Рекомендации:
28 047 просмотров •
31 августа 2022 г.
52 514 просмотров •
10 августа 2022 г.
108 390 просмотров •
11 июля 2022 г.
268 249 просмотров •
20 июня 2022 г.
626 890 просмотров •
28 марта 2022 г.
49 246 просмотров •
6 декабря 2021 г.
27 827 просмотров •
11 января 2022 г.
148 809 просмотров •
26 января 2022 г.
56 935 просмотров •
21 февраля 2022 г.
91 941 просмотр •
22 ноября 2021 г.
9 057 просмотров •
1 ноября 2021 г.
8 384 просмотра •
9 ноября 2020 г.
19 054 просмотра •
18 октября 2021 г.
16 960 просмотров •
4 октября 2021 г.
6 505 просмотров •
19 ноября 2020 г.
11 182 просмотра •
23 ноября 2020 г.
52 184 просмотра •
29 ноября 2020 г.
10 282 просмотра •
2 декабря 2020 г.
12 540 просмотров •
4 декабря 2020 г.
29 937 просмотров •
6 декабря 2020 г.
18 496 просмотров •
12 декабря 2020 г.
27 760 просмотров •
17 декабря 2020 г.
40 103 просмотра •
21 декабря 2020 г.
15 039 просмотров •
24 декабря 2020 г.
5 839 просмотров •
29 декабря 2020 г.
18 323 просмотра •
12 января 2021 г.
16 540 просмотров •
15 января 2021 г.
142 326 просмотров •
30 января 2021 г.
36 739 просмотров •
20 февраля 2021 г.
43 751 просмотр •
28 февраля 2021 г.
parzival
08.09.22 в 18:47
5 webpack нужен, очень)