Альтернатива традиционным сборщикам!
Автор Payal Mittal
Мы часто изо всех сил пытаемся оставить нормальное позади и принять что-то другое и новое. То же самое касается разработчиков. В этом 2020 году, когда у нас есть ES-модули, поддерживаемые современными браузерами, мы по-прежнему зависим от сборщиков. Почему?? Потому что после столь долгого использования бандлеров они стали необходимостью в веб-разработке, и, могу я сказать, мы к ним вполне привыкли.
Впервые он был представлен в 2019 году, когда модули ES стали поддерживаться современными браузерами. Snowpack слишком прост и удобен в использовании.
Snowpack, будучи инструментом установки зависимостей, не оставляет места для использования пакетов, в отличие от Webpack или Parcel. В этом блоге мы узнаем больше об этой новой среде разработки.
Что такое Snowpack?
"Snowpack – это облегченная цепочка инструментов нового поколения для разработки современных приложений на JavaScript".
Самая захватывающая часть Snowpack заключается в том, что он создает веб-приложения, не завися от сборщика. Это своего рода альтернатива сборщику.
Во-первых, мы поймем, что такое объединение и почему оно требуется. Объединение — это процесс, который минимизирует и объединяет все файлы JavaScript и объединяет их вместе на этапе производства.
С помощью Snowpack легко создавать веб-приложения с использованием современных и новейших фреймворков JavaScript, таких как React.js, Angular.js, Svelte.js, Vue.js, Preact.js и многих других.
Snowpack — это (un)bundler, который использует мощь модулей ES для реализации концепции системы сборки O(1), в которой каждый файл выражается как функция. Давайте подробно разберемся с термином O(1) Build Tooling.
Что такое инструменты сборки O(1) в Snowpack??
Очень распространенная проблема, с которой мы часто сталкиваемся при работе с традиционными сборщиками для разработчиков, такими как Parcel и Webpack, заключается в том, что эти сборщики переупаковывают целые фрагменты приложения каждый раз, когда вы вносите небольшое изменение и сохраняете файл. Это создает задержку между сохранением файла и отображением этих изменений в браузере. Задержка может длиться несколько секунд.
Snowpack решает эту проблему, устраняя необходимость использования сборщиков в процессе разработки. Если вы вносите изменения в файл, Snowpack перестраивает только этот файл. (Откровенно говоря, никакого объединения нет вообще, это всего лишь метафора, указывающая на эту пересборку файла.) Вы можете увидеть изменения, обновленные мгновенно, в браузере через Hot Module Replace (HMR). Этот подход известен как «O(1) Build Tooling».
Основные функции –
Одной из самых интересных особенностей Snowpack является возможность горячей замены модуля (HMR). Благодаря этому Snowpack обновляет ваши веб-приложения сразу же после изменения без обновления страницы. Считайте, что вы вносите какие-то изменения в CSS, сохраняете их, и эти изменения мгновенно появляются на странице, даже не обновляя ее.
Поддерживает -
- Библиотеки, такие как React, Preact, Vue, Svelte, lit-element, lit-HTML, Tailwind CSS, Styled Components и другие!
- Такие инструменты, как Babel, PostCSS, ESbuild, TypeScript, 11ty, Sass и др.
- Как современные, так и устаревшие браузеры, даже IE11.
Некоторые другие великолепные функции:
✔ Оптимизация производства
✔ Инициируется менее чем за 50 миллисекунд
✔ Работает быстро даже в больших проектах
✔ Поддержка модулей CSS, JSON, JSX и т. д.
✔ Разработка без пакетов
И список продолжается. Но мы не можем, поэтому я сразу перейду к другому разделу о том, как работает Snowpack.
Как это работает?
Он работает по принципу "Раздельной разработки". Давайте разберемся с этой концепцией
Раздельная разработка — это идея доставки отдельных или отдельных файлов на этапе разработки. Файлы по-прежнему можно создавать с помощью таких инструментов, как Sass, Babel или TypeScript, а затем загружать в браузер по отдельности вместе с зависимостями с синтаксисом ESM export и import. В случае внесения каких-либо изменений в файл Snowpack перестраивает этот единственный файл.
Раздельная разработка имеет ряд преимуществ по сравнению с традиционной пакетной разработкой. Отдельные сборки в раздельной разработке более быстрые, предсказуемые, простые в настройке и отладке, а также детерминированные.
Вот шаги, связанные с его работой -
👉 Сканирование вашего сайта/приложения на наличие всех используемых пакетов npm.
👉 Чтение установленных зависимостей из вашего каталога.
👉 Отдельное объединение ваших зависимостей в отдельные файлы .js.
👉 Каждый из этих файлов можно запустить напрямую в браузере и импортировать с помощью операторов импорта ESM.
Каждый файл создается индивидуально и кэшируется на неопределенный срок.
В этом заключается реальная сила раздельной разработки, поскольку файл не будет ни создаваться дважды, ни повторно загружаться браузером (если только он не изменится). Если вы никогда не изменяете файл, вам никогда не придется его перестраивать.
В то время как почти все сообщество JavaScript использует пакетную разработку почти всегда, этот новый подход к раздельной разработке довольно захватывающий и привлекательный.
От Snowpack 1.0 к Snowpack 2.0
Единственная цель разработки Snowpack 1.0 была очень проста — установить пакеты npm для запуска непосредственно в браузере. Эта концепция была сформулирована для того, чтобы убрать требования к сборщикам в пакетах JavaScript и ускорить процесс веб-разработки.
И знаешь, что? Это действительно РАБОТАЛО.
Многие разработчики обратились к Snowpack, чтобы установить свои зависимости и уменьшить чрезмерное использование инструментов для создания веб-сайтов. За очень короткий промежуток времени он превратился в совершенно новый тип среды разработки, гораздо более быстрой и легкой.
Snowpack 2.0 был выпущен 27 мая 2020 года, и я должен сказать, что новая версия значительно улучшилась благодаря более быстрой среде разработки, настраиваемой маршрутизации и другим удивительным и готовым функциям.
Он удаляет сборщик из вашей среды разработки, используя встроенную поддержку «ES Module (ESM) для доставки встроенных файлов непосредственно в браузер. Это не просто более быстрый инструмент, это новый подход к системам веб-сборки».
Начало работы со Snowpack
Snowpack можно установить как через npm, так и через yarn, давайте посмотрим, как это сделать.
#Using npm npm install –save-dev snowpack #For latest updated version npm i snowpack@latest --save-dev #Using yarn yarn add –dev snowpack
Самый простой способ начать работу со Snowpack — использовать Создать приложение Snowpack (CSA), которое инициализирует начальное приложение в среде Snowpack-dev.
npx create-snowpack-app new-dir --template @snowpack/app-template-NAME [--use-yarn | --use-pnpm]
Посетите сайт документации для получения дополнительной информации -
Короче -
Поскольку вы знаете, что Snowpack является новичком в сообществе веб-фреймворков, он может заменить Webpack в будущем и может вообще устранить необходимость в упаковщиках.
Но поскольку мы все очень хорошо понимаем, что это не то, что можно легко заменить, в конце концов, Webpack — очень важный инструмент в экосистеме JavaScript, и он опережает Snowpack на столько лет.
Однако в эту техническую эпоху, когда мы привыкли все делать легко, я уверен, что Snowpack тоже получит свой шанс (учитывая его простой в использовании подход к работе).
Спасибо, что дочитали до этого места!!
