Как использовать Snowpack с Svelte и React
Snowpack - это инструмент сборки, аналогичный Webpack. Он нацелен на молниеносное время сборки за счет разукрупненного подхода к разработке. Он делает это, собирая каждый модуль только один раз и никогда больше. В то время как Webpack и другие сборщики обычно объединяют все ваше приложение каждый раз, когда что-то изменяется в вашем приложении. Это может означать несколько секунд для более крупных проектов, которые могут складываться очень быстро.
Snowpack перестраивает файл только в том случае, если он действительно изменяется, тогда как Webpack перестраивает весь ваш пакет. Это означает, что для каждого модуля вы получите отдельный файл, в отличие от Webpack, где он объединяет все зависимости в один файл JavaScript. С этой точки зрения Snowpack отлично подходит для проекта любого размера. По мере роста вашего проекта время сборки не изменится. Они остаются такими же быстрыми, как и в начале вашего проекта.
Также стоит отметить, что Snowpack кэширует ваши сборки, чтобы не создавать один и тот же файл снова и снова. Кроме того, он не предлагает никакой конфигурации, как и Посылка. Если вам все еще нужно определить какие-то собственные правила, у Snowpack действительно есть файл конфигурации, который вы можете использовать, чтобы настроить его по своему вкусу.
Все это приводит к более быстрым пакетам и более высокой скорости разработки. Итак, давайте посмотрим, как мы можем настроить Snowpack с нуля. Затем мы рассмотрим, как использовать его со Svelte и React.
Как использовать Snowpack с Svelte
Самый простой способ создать новый проект Snowpack - запустить в терминале следующую команду:
npx create-snowpack-app snowpack-svelte --template @snowpack/app-template-minimal
Если у вас нет npx, установите его глобально, запустив npm i -g npx. После завершения установки Snowpack cd в папку проекта и запустите npm run start, чтобы проверить, все ли работает правильно. Вы должны увидеть в своем браузере следующее:
Добро пожаловать в Snowpack!
Пока все хорошо, но нам не хватает Svelte. Для его использования нам потребуются две дополнительные зависимости: сам Svelte и плагин Svelte для Snowpack:
npm i svelte @snowpack/plugin-svelte
Плагины в Snowpack предназначены для расширения функциональности Snowpack без необходимости реализации настраиваемого поведения. Чтобы использовать этот плагин, откройте ваш snowpack.config.js файл из корня проекта и добавьте установленный плагин в массив plugins:
Это позволит Snowpack обрабатывать .svelte файлов за вас. Чтобы попробовать, добавьте App.svelte в папку src со следующим содержимым:
Если вы предпочитаете использовать Sass, для этого тоже есть плагин. Вы можете установить его, выполнив следующую команду. Не забудьте также включить его в массив plugins:
npm i @snowpack/plugin-sass
Затем вызовите свой App.svelte в своем index.js, чтобы запустить Svelte:
Перезагрузите сервер разработки и проверьте, все ли было скомпилировано правильно:
Использование статических активов
Чтобы импортировать изображения, скажите, используя следующий путь в Svelte:
Вы хотите создать папку assets в корне вашего каталога. Теперь вы можете не захотеть хранить статические активы в корневой папке вашего проекта. Вместо этого более распространенной практикой является хранение их в public папке. Однако тогда вам придется изменить путь, чтобы он указывал на public:
Чтобы сохранить простой путь импорта, но при этом сохранить ресурсы в папке public, вам необходимо настроить объект mount в вашем snowpack.config.js файле. Добавьте к нему следующие две новые строки:
Это укажет Snowpack использовать папку public в качестве корневого каталога при открытии браузера. Он также указывает ему сопоставить каталог src с /dist. Ключ - это имя каталога в корне вашего проекта, который вы хотите сопоставить, а значение - это место, где вы хотите, чтобы папки были при построении.
Теперь, когда папка public стала вашей корневой папкой, которая будет обслуживаться браузером, вы также хотите переместить свой index.html файл в папку public. Это также означает, что вы хотите обновить импорт в вашем index.html файле:
И, наконец, не забудьте также обновить import в index.js:
Как видите, конфигурация mount позволяет вам использовать настраиваемую структуру проекта, чтобы размещать файлы там, где вы действительно хотите, чтобы они были. Если вы также хотите упростить свои import операторы, Snowpack также позволяет вам определять псевдонимы через свой файл конфигурации. Наконец, чтобы собрать проект, просто запустите npm run build, и все готово.
Как вы можете использовать Snowpack с React
Snowpack также имеет встроенную поддержку JSX. Это означает, что вам не нужен какой-либо плагин или дополнительная настройка, чтобы он работал с React. Шаги точно такие же, как и для Svelte. Только на этот раз вы хотите установить пакеты React вместо Svelte, и все:
npm i react react-dom
Резюме
Snowpack - отличный инструмент, если вы хотите оптимизировать время сборки, а версия 3 только что вышла. Одним из самых больших преимуществ Snowpack для меня является то, что он обеспечивает нулевую конфигурацию из коробки, как и Parcel, но также имеет простой для понимания файл конфигурации, который вы можете использовать, если вам нужно какое-то настраиваемое поведение.
Он имеет встроенную поддержку модулей JSX, TypeScript, React или CSS, что делает его очень удобным для новых проектов с современным технологическим стеком. Вы раньше использовали Snowpack? Если да, поделитесь с нами своими мыслями в разделе комментариев ниже! Спасибо, что прочитали, удачного кодирования!
