Исходная статья: https://aralroca.com/blog/discovering-snowpack
В сегодняшней статье мы немного разберемся, что такое Снежный пак и в чем его преимущества.
В последние несколько месяцев я слышал много разговоров о Snowpack, но не давал ему шанса. Время пришло.
Работа с ЭСМ
Чтобы понять, что делает Snowpack, давайте сначала посмотрим, как работать с ESM напрямую, без каких-либо инструментов.
В настоящее время, если мы хотим, например, настроить приложение Preact без каких-либо инструментов, мы можем сделать что-то вроде этого:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<script type="module" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Example app</title>
</head>
<body id="app" />
</html>
Добавления type="module"
к тегу script
достаточно, чтобы сообщить браузеру, что мы используем ESM.
Затем index.js будет точкой входа нашего приложения Preact, вершиной дерева компонентов.
index.js
import { html, render } from 'https://unpkg.com/htm/preact/standalone.module.js' import { Example } from './example.js'
function App() { return html` <h1>Some example</h1> <${Example} /> ` }
render(html`<${App} />`, document.getElementById('app'))
Это хорошо работает. Однако у него есть определенные недостатки, которые уже устранены с помощью современных инструментов, таких как Webpack или Parcel. Среди наиболее важных:
- Горячая перезагрузка в разработке
- Импорт других файлов как
.json
,.css
... - Инструменты, такие как Typescript, JSX, PostCSS, Sass, Babel…
- Совместимость с устаревшими браузерами
- Управление тридцати партийных библиотек
Итак… Почему бы не использовать для этого Webpack или Parcel? Возможно, по-прежнему имеет смысл использовать сборщики, такие как Webpack или Parcel.
Давайте продолжим спрашивать… Что делает сборщик? Зачем нам действительно нужен упаковщик?
Сборщики модулей
В 2012 году не было ESM, а с приходом Webpack использование бандлеров стало актуальным. Благодаря им можно использовать .js
файлы, как если бы они были модулями, имея возможность использовать import
и export
везде.
Сборщики по-прежнему имеют большой смысл сегодня, поскольку многие браузеры еще не поддерживают ESM. Мы можем использовать тот же процесс для минимизации и оптимизации производственного кода.
Главный вопрос здесь должен звучать так: «Есть ли смысл продолжать использовать сборщик в разработке?» Запуск всего вашего приложения через упаковщик вносит дополнительную работу и сложность в ваш рабочий процесс разработки, который не нужен теперь, когда ESM широко поддерживается.
Раздельная разработка
Snowpack предназначался для использования отдельной разработки с использованием непосредственно ESM. Среди других преимуществ:
- Гораздо быстрее (время сборки не требует ожидания, немедленное отражение изменений)
- Легче отлаживать
- Размер проекта не влияет на скорость разработки
- Более простая оснастка
- Минимальная конфигурация
Он также обеспечивает решение проблем ESM, о которых мы упоминали. Хотя вы можете выполнять производственную сборку непосредственно с помощью Snowpack, это дает вам возможность оптимизировать свои рабочие сборки с помощью Webpack или Parcel.
Предварительно с Snowpack
Давайте создадим проект Preact с CLI create-snowpack-app:
npx create-snowpack-app preact-snowpack-example --template @snowpack/app-template-preact --use-yarn
Потом:
cd preact-snowpack-example
yarn start
После yarn start
, через ~50 мс наша среда разработки Preact находится под http://localhost:8080
, с Babel, JSX и знакомыми вещами Webpack.
Вы можете протестировать его, чтобы увидеть, насколько это быстро и просто.
Если вы просмотрите исходный код, вы увидите, что ESM используется за кулисами, с некоторыми отличиями:
import { h, render } from '/web_modules/preact.js' // Uses /web_modules/* for dependencies
import '/web_modules/preact/devtools.js'
import App from './App.js'
import './index.css.proxy.js' // Uses .js files for css imports
Вывод
Мы немного рассмотрели Snowpack, чтобы начать понимать, как он вписывается в экосистему JavaScript.
Я надеюсь, что эта статья вызовет у вас любопытство и желание попробовать Snowpack. Это не руководство, чтобы узнать больше о Snowpack и ESM, я рекомендую посетить справочные ссылки.