Быстрый и простой инструмент сборки для современных веб-приложений без комплектов
Сегодня мы считаем, что нам нужен сборщик модулей, такой как 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 в большом проекте, и пока у меня не было никаких проблем, а также улучшилась моя производительность.
использованная литература
Надеюсь, вам понравилась эта статья. Большое спасибо, что прочитали меня!