В этой статье мы впервые рассмотрим Snowpack, а именно Snowpack 3, который на момент написания статьи только что вышел. Snowpack — это интерфейсный инструмент для сборки, который привлекает большое внимание в сообществе за то, что предлагает подход, отличный от таких инструментов, как webpack, и я давно хотел его проверить. Давайте погрузимся!
История инструментов сборки
Прежде чем мы рассмотрим Snowpack, нам нужно уделить немного времени, чтобы понять, как и почему появились сборщики, такие как webpack. Отсутствие модульной системы в JavaScript до модулей ES2015 означало, что в браузере самое близкое, что мы могли сделать с модулями, — это разбить наш код на файлы, которые поместили код в глобальную область видимости, поскольку именно так мы разделяли его между файлами. Обычно можно было увидеть такой код:
window.APP = {}
window.APP.Authentication = {... }
window.APP.ApiLoader = {... }
Когда Node.js появился и стал популярным, у него была модульная система в форме CommonJS:
const Authentication = require ('. /Authentication.js’)
const APILoader = require ('. /APILoader.js’)
Как только это стало популярным как часть Node, люди захотели использовать его в браузере. Именно тогда начали появляться инструменты, которые делали это; они могли взять приложение, использующее модули CommonJS, и объединить его в один большой файл JavaScript, requireудалив все символы s, и запустить его в браузере. Browserify был первым таким инструментом, который я использовал для этого, и, честно говоря, это было похоже на волшебство! Это было примерно в то время, когда появился
Когда модули ES были впервые представлены (см. «Понимание модулей ES6 «для освежения знаний), люди стремились их использовать, но были две проблемы:
Пока спецификация была готова, браузеры не поддерживали модули ES.
Даже если браузер поддерживает
Webpack (и другие) обновлены для поддержки модулей ES, но они всегда будут объединять ваш код в один файл, как для разработки, так и для производства. Это означало, что типичный рабочий процесс:
Отредактируйте файл в своем приложении.
Webpack смотрит, какой файл был изменен, и повторно компилирует ваше приложение.
Вы можете обновить браузер и увидеть изменения. Часто это делается за вас с помощью плагина
Проблема здесь заключается во втором шаге, поскольку ваше приложение увеличивается в размерах. Работа
Подход Снежного Пака
Ключевым преимуществом Snowpack для меня является эта строка из их документации:
Snowpack обслуживает ваше приложение отдельно во время разработки. Каждый файл нужно построить только один раз, а затем кэшировать навсегда. Когда файл изменяется, Snowpack перестраивает этот единственный файл.
Snowpack в полной мере использует преимущества модулей ES, поддерживаемых всеми основными браузерами, и не объединяет ваше приложение в процессе разработки, а вместо этого обслуживает каждый модуль в виде отдельного файла, позволяя браузеру импортировать ваше приложение через модули ES. См. «Использование модулей ES в браузере сегодня «для получения более подробной информации о браузерах и их поддержке отдельных модулей ES.
На этом этапе важно отметить, что для использования Snowpack необходимо использовать модули ES. Вы не можете использовать CommonJS в своем приложении.
Однако возникает вопрос: что, если вы установите зависимость от npm, которая использует CommonJS? Хотя я надеюсь, что однажды большинство пакетов npm будут поставляться в виде
К счастью, Snowpack может справиться и с этим! Когда он увидит зависимость (скажем, React) в вашей node_modulesпапке, он может связать только эту зависимость в свой собственный
Надеюсь, вы понимаете, почему Snowpack привлек мое внимание. Давайте запустим его и посмотрим, как он себя чувствует при использовании в приложении.
Начиная
Для начала я создаю новую пустую папку проекта и запускаю npm init -yее, чтобы начать работу. Это создает основу, package.jsonкоторую я могу изменить позже, если захочу. Вы также можете запустить npm initбез -y, что заставит npm предлагать вам ответить на вопросы, чтобы заполнить детали в вашем файле package.json. Мне нравится использовать -yего, чтобы быстро приступить к работе; Я могу отредактировать package.jsonпозже.
Затем я устанавливаю Snowpack как зависимость разработчика:
npm install —
И теперь я добавляю в свой файл два скрипта package.json:
«scripts»: {
«start»: «snowpack dev»,
«build»: «snowpack build»
},
Это устанавливает нам две npm runкоманды:
npm run startзапустит Snowpack в режиме разработки.
npm run buildзапустит производственную сборку Snowpack, о которой мы поговорим позже.
Когда мы запускаем наше приложение, Snowpack запускает небольшой сервер разработки, который будет запускать наше приложение локально. Он будет искать index.htmlфайл, поэтому давайте создадим один из них, а также создадим app.js, который пока будет просто выводить логи hello worldв консоль:
Теперь мы можем запустить npm run start (или npm startдля краткости — startэто один из методов жизненного цикла npm, перед которым не нужно ставить префиксrun).
Вы должны увидеть, что вывод вашего терминала выглядит примерно так:
snowpack
Server started in 80ms.
▼ Console
[snowpack] Hint: run «snowpack init» to create a project config file. Using defaults...
[snowpack] Nothing to install.
Первая часть вывода говорит нам, что Snowpack работает на localhost:8080. Следующая строка предлагает нам создать файл конфигурации Snowpack, что мы вскоре и сделаем, но я хочу выделить последнюю строку:
[snowpack] Nothing to install.
Это Snowpack сообщает нам, что он проверил все модули npm, с которыми нужно работать, и ничего не нашел. Через мгновение мы добавим пакет npm и посмотрим, как с ним справляется Snowpack.
Создание файла конфигурации
Вы можете запустить npx snowpack init, чтобы сгенерировать файл конфигурации, как предлагает вывод командной строки. Нам не нужно будет менять поведение Snowpack, пока мы не перейдем к сборке для производства, но если вы это сделаете, вы можете создать этот файл и настроить широкий спектр параметров, чтобы Snowpack работал именно так, как вы хотите.
Написание модулей ES
Давайте создадим еще один файл JavaScript, чтобы посмотреть, как Snowpack работает с несколькими файлами. Я создал api.js, который экспортирует функцию, которая принимает имя пользователя и извлекает некоторые из их общедоступных репозиториев с GitHub:
export function fetchRepositories (user) {
return fetch (`https: //api.github.com/users/${user}/repos`)
.then (response=> response.json ());
}
Затем в app.js, мы можем импортировать и использовать эту функцию. Не стесняйтесь заменить мое имя пользователя GitHub своим собственным!
import {fetchRepositories} from '. /api.js’;
fetchRepositories ('jackfranklin’).then (data => console.log (data));
Сохраните этот файл и снова запустите Snowpack, если вы не оставили его запущенным ранее. В консоли браузера вы увидите ошибку:
Uncaught SyntaxError: Cannot use import statement outside a module
Это
Поскольку
Чтобы использовать
И когда вы сохраните это, ваш браузер должен обновиться автоматически (еще одна приятная вещь, которую Snowpack делает из коробки), и вы увидите список репозиториев GitHub, зарегистрированных в консоли.
Установка зависимостей npm
Давайте посмотрим, как Snowpack справляется с установкой пакета из npm. Я собираюсь вывести наш список репозиториев на экран с помощью Preact.
npm install —save preact
Обратите внимание, что я использую hпомощник для создания HTML, а не JSX. Я делаю это для ускорения, чтобы запустить пример. Чуть позже в этой статье мы переключимся на JSX и посмотрим, как Snowpack справится с этим, так что держитесь крепче.
Теперь, когда мы запустим npm start, Snowpack выведет это:
[snowpack]! building dependencies...
[snowpack] ✔ dependencies ready! [0.33s]
Вы можете видеть, что он нашел Preact и создал пакет модулей ES, готовый для использования. Если вы посмотрите на вкладку «Сеть» инструментов разработчика, вы увидите запрос к app.js, api.jsи preact.js, который является файлом Snowpack, созданным для нас из зависимости Preact. Что хорошо в подходе Snowpack, так это то, что теперь он создал этот файл Preact, он будет кэшировать его и
Вкладка сети в ChromeDevTools
Поддержка JSX
Snowpack имеет хорошую поддержку ряда синтаксисов и типов файлов из коробки. Он поддерживает JSX, но с одним условием: все JSX должны быть определены в.jsxфайлах. Вы можете изменить это, если хотите (подробности см. в документации), но мне всегда нравилось использовать.jsx. Давайте создадим новый файл JSX, содержащий наш компонент Preact
Обратите внимание, что, несмотря на то, что мы не вызываем hпомощника напрямую, нам нужно его импортировать, чтобы Snowpack не предположил, что мы используем React.
И у нас есть список репозиториев на экране.
Производственные сборки
На момент написания этой статьи запуск рабочей сборки Snowpack не собирал и не уменьшал все ваши файлы в один пакет, как можно было бы ожидать. Это объяснено далее в руководстве по производственной сборке Snowpack, но специальность Snowpack заключается в том, чтобы быть инструментом многофайловой сборки ES Modules, а не полным сборщиком. На момент написания Snowpack работает над предоставлением встроенной сборки через esbuild, но в документации указано, что это все еще очень экспериментально и на него не следует полагаться в больших проектах.
Вместо этого рекомендуется использовать другой упаковщик, для которого Snowpack предоставляет плагины:
плагин
Сводный плагин
Обратите внимание, что вам не нужно вручную устанавливать другой упаковщик. Это плагины Snowpack, которые вы можете настроить в файле конфигурации Snowpack. Затем Snowpack позаботится о вызове webpack/Rollup, чтобы вы могли связать свое приложение при запуске snowpack build.
Связка с Webpack
Вскоре мы рассмотрим поддержку встроенного сборщика esbuild в Snowpack, но на данный момент использование одного из этих плагинов является простым решением, а также рекомендуемым подходом. Давайте настроим подключаемый модуль Snowpack для
npm install —
Вам также понадобится файл конфигурации, поэтому запустите npx snowpack init (если вы еще этого не сделали), чтобы сгенерировать файл конфигурации, в котором мы можем настроить подключаемый модуль
Пустой объект — это то место, куда вы можете поместить любые дополнительные параметры конфигурации, хотя он должен нормально работать из коробки. Теперь, когда мы запустим npm run build, Snowpack распознает, что мы добавили подключаемый модуль
Одна из приятных вещей, которые
Мы можем убедиться в этом сами, если экспортируем и определяем функцию, в api.jsкоторой мы никогда не используемы запустим npm run buildеще раз, а затем загрузим наш уменьшенный вывод (он будет в build/jsкаталоге и будет называться app.[hash].js), мы увидим, что если мы ищем файл для 'NEVER CALLED’, он не был включен. Webpack был достаточно умен, чтобы понять, что мы никогда не вызывали эту функцию, поэтому ее можно было удалить из окончательного вывода.
Объединение с esbuild
Чтобы получить представление о том, как может выглядеть будущее, когда поддержка esbuild в Snowpack будет улучшена, а сам esbuild станет более готовым к работе (более подробную информацию о esbuild и его дорожной карте см. в документации esbuild), давайте настроим это. Сначала удалите всю конфигурацию плагина webpack из вашего snowpack.config.jsфайла и вместо этого добавьте optimizeобъект:
Теперь, когда вы запустите npm run build, esbuild вступит во владение и выполнит последние шаги по оптимизации, создав build/app.jsполностью минимизированную версию. Он также удаляет мертвый код, как и
На данный момент я бы остановился на плагине webpack, если вам нужна полностью надежная, проверенная в бою сборка, но для побочных проектов или небольших приложений, возможно, стоит изучить esbuild подробнее.
Вывод
Snowpack дал мне фантастический опыт разработки, и мне очень захотелось попробовать его снова в другом проекте. Я знаю, что в этой статье мы использовали Preact, но Snowpack поддерживает множество других библиотек, включая React, Svelte и многие другие, документацию по которым вы можете найти на
Если вы еще не использовали Snowpack, я настоятельно рекомендую попробовать и следить за Snowpack в ближайшие месяцы и годы. Я не удивлюсь, если это инструмент, который большинство разработчиков будут использовать в недалеком будущем.
