Вимоги: 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、мініфікувати(Компресор для файлів 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
|
|
|
|
