Требования: Fetch Event Source — это потоковая передача SSE, реализованная Microsoft, построенная с использованием NPM-пакетов, не может использоваться напрямую в браузере и требует компиляции NPM-пакета в JavaScript-скрипт, выполняемый браузером.
NPM — это инструмент управления пакетами Node, реализованный на основе стандарта Node API, тогда как JavaScript — это скриптовый язык, который работает в браузере на основе стандарта ECMAScript. Из-за различных стандартов NPM-пакеты не могут запускаться напрямую в браузере.
Часто используемые инструменты для упаковки:
- Webpack: Webpack — один из самых популярных инструментов для фронтенд-упаковки, он поддерживает JavaScript, таблицы стилей, изображения и другие ресурсы, а также поддерживает модульную разработку.
- Parcel: Parcel — это инструмент упаковки без конфигурации, который автоматически обрабатывает зависимости и упаковывает проекты, что делает его идеальным для быстрого создания проектов.
- Rollup: Rollup ориентирован на упаковку JavaScript-библиотек, которые могут упаковать несколько модулей в один файл и поддерживают оптимизацию Tree Shaking.
- Browserify: Browserify позволяет использовать модульную систему Node.js в вашем браузере, которая может упаковывать модули CommonJS в узнаваемый браузером код.
- Grunt: Grunt — это инструмент автоматизации задач, который можно использовать для упаковки, сжатия, слияния и других операций, таких как упаковка кода.
- Gulp: Как и Grunt, Gulp — это инструмент автоматизации задач, но он использует код вместо настройки, чтобы сделать определения задач более лаконичными и понятными.
- Brunch: Brunch — это быстрый и простой инструмент для оформления фронтенда, который может работать с JavaScript, CSS, HTML и другими файлами, а также поддерживает расширения плагинов.
В этой статье требуется два инструмента:Browserify、уменьшать(Compressor для файлов JS, CSS, HTML и IMG)
Сначала создайте новую папку и быстро инициализуйте проект Node следующей командой:
пересматриватьpackage.jsonДокумент гласит следующее:
Установите browserify, minify, fetch-event-source, команда выглядит следующим образом:
Выполните команду компиляции следующим образом:
Где: -r указывает имя npm-пакета, которое нужно компилировать -s Имя модуля, используемого в коде (пользовательское имя в соответствии с вашими привычками)
После завершения выполнения event.min.js — это сжатый файл, как показано на рисунке ниже:
Скопируйте event.min.js контент на консоль браузера для тестирования, как показано на изображении ниже:
(Конец)
|
Опубликовано 25.04.2024 20:28:21
|
|
|
|
