Быстрый и простой инструмент сборки для современных веб-приложений без комплектов

Сегодня мы считаем, что нам нужен сборщик модулей, такой как Webpack, для создания наших приложений, разработки простых приложений или во время разработки, но это не так.

В какой-то момент в прошлом сборщики модулей JavaScript стали неотъемлемой частью на любом этапе веб-разработки, увеличивая сложность любой разработки.

Пример современного сборщика модулей - Webpack. Webpack - это мощный инструмент, который может многое делать, но в то же время его сложно настроить и требует большого обучения. Webpack был представлен в 2012 году, и в то время модулей ES не существовало.

В настоящее время у нас есть другие альтернативы, такие как Snowpack, который не содержит сборщиков модулей, а версия 2.0 выйдет в конце этого месяца, но мы можем попробовать ее сейчас.

Примечание. Эти примеры работают в версии 2.0 Snowpack и предыдущих версиях.

Модуль Snowpack был представлен в 2019 году, когда современные браузеры уже поддерживали модули ES. Тем не менее, я думаю, что Snowpack во многих отношениях проще в использовании и практичен во многих случаях, и в этой статье я покажу вам простой пример.

Сначала создайте проект npm (аналогично, если вы хотите использовать пряжу):

Будет создан файл package.json, который вы будете использовать для добавления зависимостей проекта:

$npm init

Установите Snowpack:

Думаю, лучше установить локально, но как вам удобнее.

//Install locally, in your project:
$npm install --save-dev snowpack@next
//Install glaobaly:
$npm install -g snowpack

Примечание. Добавьте «@ next», чтобы попробовать новую версию 2.0.

Установите зависимость «js-storage»:

В этом примере я собираюсь использовать « js-storage »: JS Storage - это плагин, который упрощает доступ к хранилищу (HTML5).

js-storage.js

$npm install --save-dev js-storage

Предыдущая команда устанавливает библиотеку «js_storage» в папку / node_modules /. Но обратите внимание, что вы не можете использовать его напрямую, потому что он не соответствует спецификации модулей ESM.

import js_storage from 'js-storage'; //No a valid ESM.

Хотя большинство из нас пишут « js-storage », а не « js-storage .js», браузеры не могут понять его без расширения файла, потому что это не действующий URL. Snowpack позволяет объединять пакеты npm в отдельные файлы, чтобы создавать js-storage .js, понятные браузерам.

Запускаем SnowPack:

Мы собираемся использовать npx для выполнения двоичного файла snowpack, поэтому нам нужно установить npx (выполнить двоичные файлы пакета npm).

$ npm install -g npx
//Execute
$ npx snowpack

И ничего не происходит:

⠼ установка снежного покрова
✖ нечего устанавливать.

Чтобы решить эту проблему, откройте файл package.json и добавьте свои зависимости в конфигурацию Snowpack:

{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "js_storage": "^1.1.0",
    "snowpack": "^2.0.0-beta.9"
  },
"snowpack": {
    "knownEntrypoints": [
      "js_storage"
    ]
  }
}

Примечание. в предыдущих версиях SnowPack (‹2),« knownEntrypoints »назывались« webDependencies ».

Снова запустить:

npx snowpack

✔ Установка снежного покрова завершена. [0,77 с]

⦿ web_modules / размер gzip
└─ js-storage.js

Snowpack устанавливает ваши зависимости npm, чтобы их можно было запускать непосредственно в современном браузере (через собственный импорт ESM).

Snowpack устанавливает ваши пакеты в каталог «/ web_modules» (вы можете настроить путь *). И теперь вы можете импортировать и использовать их прямо в браузере без дополнительных этапов сборки.

Обратите внимание, что эта возможность импортировать пакеты npm непосредственно в браузере без использования сборщика модулей является основой того, что вся разработка без пакетов и Snowpack строятся на его основе.

Используйте зависимость непосредственно в браузере:

<script type="module">
   import js-storage 
       from "/web_modules/js_storage.js";
</script>

Или используйте зависимость в своем файле js:

import js-storage
       from '/web_modules/js_storage.js';

** Настройте выходной путь в файле package.json (необязательно):

...
"snowpack": {
    ...
    "installOptions": {
      "dest": "/my_web_modules"
    }
  }
...

И это все. Понятно, что вы можете использовать зависимости npm в своем браузере или в своих файлах js.

Snowpack также имеет «сервер разработки» (среда мгновенной разработки для веб-приложений). Если вы выполните следующую команду, будет запущен статический сервер:

$snowpack dev

При разработке без пакетирования каждый файл создается только по запросу браузера, поэтому при запуске не выполняется никаких действий и не выполняется повторное объединение при каждом изменении одного файла.

Вы также можете развернуть свое приложение и сгенерировать статическую копию вашего сайта для производства, выполнив следующую команду:

$snowpack build

И, наконец, вы можете оптимизировать свой сайт, «связав» ваше окончательное развертывание (файлы js, файлы css) с производственной средой, выполнив следующую команду:

$snowpack build -bundle

Мы также можем использовать Snowpack для питания всего нашего конвейера сборки. Babel, TypeScript и другие инструменты сборки могут быть напрямую подключены к Snowpack с помощью преобразования строк. Эти преобразования называются «сценариями сборки».

Например, создание файла snowpack.config.json:

{
  "scripts": {
   //Pipe every .js file through Babel CLI
   "build:js": "babel --no-babelrc"    
  }
}

Заключение

Теперь, когда современные браузеры уже поддерживают модули ES, Snowpack представляет собой идеальный инструмент: его легко использовать, если вам нужно начать с нуля, и вам не нужно писать много конфигураций. Это также быстро, и вы можете легко использовать его в режиме разработки. Конфигурация Webpack более мощная, но, возможно, вам не нужно столько персонализации.

Я использую Snowpack в большом проекте, и пока у меня не было никаких проблем, а также улучшилась моя производительность.

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

Сайт Snowpack

Надеюсь, вам понравилась эта статья. Большое спасибо, что прочитали меня!