Исходная статья: 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, я рекомендую посетить справочные ссылки.

использованная литература