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

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

Доп. материалы:

Таймкоды:
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 сборка
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 ➝ Итоги. Время ставить лайки и писать комменты :)

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

[UlbiTV]

Что думаете про ESBuild? Используете в проде? Нужен ли подобный, но более обьемный и подробный ролик про Webpack 5?

[yevissi]

WEBPACK 5 на React, со всевозможными оптимизациями - это супер полезно!
Пригодится всегда. Отдельная просьба была бы - обратить внимание на настройку элиасов, укороченных путей импортов и подобные ништяки.
Спасибо за контент, Тимур!

[Andrew-kxhz]

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

[mrbamz]

Привет друг! Ты говорил про webpack. Очень даже нужен. Как будет время сделай ролик, путь даже будет не сразу, не спеши, и на несколько часов сделай ролик. Это будет основой для всех, кто будет искать знания!

[yanmezinskiy]

Да, голосую за webpack, было бы неплохо сделать обзор)

[ilyaprotsenko]

Тимур, так держать!

Сейчас документация немного изменилась, поэтому на счет hot-reload и watch код будет выглядеть следующим образом без надобности устанавливать express и вручную писать логику с EventSource:

1) Watch and Server:
const runWatchAndServer = async () => {
const ctx = await ESBuild.context(config)

await ctx.watch()

const { host, port } = await ctx.serve({
servedir:config.outdir,
port: PORT,
})

return new Promise<{host: string, port: number}>((res, rej) => {
res({host, port})
})
}

runWatchAndServer()
.then(({host, port}) => console.log(`Server started on PORT=${port}; HOST=${host}`))
.catch(console.error)

2) Hot Reload:
npm i -D

В конфиг плагинов просто вставить эту функцию и вызвать её.

...
plugins: [
CleanPlugin,
HtmlPlugin({
title: 'ESBuild'
}),
livereloadPlugin()
]
...

Или

2.1) Убрать всё то, что было написано на express в видео. Удалить логику с EventEmitter. В template html, который динамически пересоздавался, добавить вот такой скрипт из документации:
<script> new EventSource('/esbuild').addEventListener('change', () => window.location.reload()) </script>

[BlexJS]

Как по заказу, только начал изучать эту тему, спасибо за видео ❤️

[MykolaLiemiekhov]

Спасибо за видео. Да, было бы здорово посмотреть от Ulbi TV видео по Webpack.

[moi-nick-zanyat]

очень интересует разбор 5-го webpack для реакта

[RM-bcpz]

Очень полезное видео по esbuild. Ждём Webpack 5 ;)

[dobramorda]

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

[gamspi]

Спасибо большое! Буду ждать webpack 5.

[ruslanshow]

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

[OleksandrSov]

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

[виртуоз_ру]

Давно пользуюсь Vite и всем рекомендую.

[Stepan]

Спасибо больше за видео, все качественно и сочно по материалу, очень жду webpack 5
javascript html css ESBuild frontend web

[eldarkurmanaliev]

Как всегда актуальное, информативное и очень интересное видео без всякого хлама!!! Продолжай в том же духе!

[ЕжЕжиков-вь]

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

[PetrMavrin]

Спасибо. Как раз хотелось увидеть про webpack видео!) Буду ждать.

[pashastrayt]

Немного с запозданием добираюсь до всех роликов, потому что только сейчас пришло осознание, что делать все приложухи через create-react-app не вариант)
До конца досмотрел, даю обратную связь, спасибо большое за материал.
Правда то, что у сборщика нужно писать свой hot dev server чтобы юзать рандомно генерируемые имена css и js файлов, это малеха
Ну, разрабы скорее всего подтянут чуть позже.

Кстати говоря ещё досмотрел ролик про nestjs, забыл там комментарий оставить - все супер, быстро, понятно, если где то непонятно, то летишь в доки, возвращаешься к ролику, снова все понятно. Прекрасно.

Ролик про Webpack обязательно нужен. Есть конечно и документация, и лекции пятичасовые по нему, но хотелось бы увидеть твою выжимку, которая к тому же потом дает добротный поджопник к дальнейшему самостоятельному изучению)

Всех благ.