Решаем проблему выполнения JS-файла с GitHub в браузере

Быстрый ответ

Для подключения и выполнения JavaScript-файла, расположенного на GitHub, вставьте ссылку на сырой контент в элемент <script>:

<script src="https://cdn.jsdelivr.net/gh/user/repo@version/filename.js"></script>

jsDelivr является оптимальным решением для данной задачи, поскольку он преобразует URL-адреса GitHub в соответствующие MIME-типы, кэширует контент и обходит ограничения на прямое использование файлов с GitHub.

Важно заменить значения user, repo, version и filename.js на актуальную информацию вашего проекта. Если версия не указана, jsDelivr будет использовать последнюю доступную версию файла, что может привести к кэшированию и задержке при получении обновлений.

Ваш JavaScript код на GitHub и Интернет

Выбор способа доставки

GitHub предназначен для хранения ваших репозиториев и не является сетью доставки контента (CDN). В качестве CDN для доставки JavaScript-файлов ваших проектов наилучшим выбором будут jsDelivr и GitHub Pages, обеспечивающие правильную установку MIME-типа text/javascript для корректной работы скриптов.

Подробнее об этом расскажет наш спикер на видео

Мастерство выбора версии

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

Навык управления кэшированием

Кэширование – это своего рода сверхспособность, требующая осторожного использования. CDNs могут стать как благословением, так и проклятием из-за долгого времени хранения данных в кэше. Версии и теги релизов должны быть надежной защитой вашего сайта.

MIME: больше, чем мимика

При использовании ссылок с raw.githubusercontent.com напрямую возникнут проблемы с MIME-типом скрипта, что приведет к проблемам с блокировкой его выполнения в браузере. Поэтому важно выбирать CDN-сервисы, способные решить вопросы с MIME-типами.

Альтернативные решения

Если необходимо применить другой подход, вы можете использовать GitHub Pages — это простой и надежный способ обеспечения файлов с правильным MIME-типом. Для этого создайте ветку gh-pages.

Решения для продвинутых разработчиков

Хостинг на GitHub Pages

Создание ветки gh-pages гораздо проще, чем это кажется:

1. В вашем репозитории создайте ветку `gh-pages`.
2. Разместите в ней файл .js, сделайте коммит и запустите push.
3. Файл будет доступен по адресу `https://user.github.io/repo/filename.js`.

При этом MIME-тип будет установлен правильно.

GitHub в качестве элемента процесса сборки

Можно автоматизировать процесс, получив файлы непосредственно в процессе сборки с помощью инструментов вроде Webpack или Gulp. Это позволит интегрировать скрипт в приложение, оптимизировать его и объединить с другими ресурсами.

Визуализация

Подключение внешнего файла с GitHub можно представить так:

🏠 — ваш сайт. 🛒 — внешний JS-файл на GitHub. 🚚💨 — ссылка на JS-файл.

Ваши действия:

Отправка: 📦➡️🏠

И результат:

Использование: 📦🔓->💻 (сайт обогащается новыми функциями)

Как свежая пицца, JS-файл приносит радость и новые возможности на ваш сайт. 🍕

Защита безопасности

Используйте CORS для своей безопасности

Импорт скриптов с других доменов может столкнуться с правилами CORS (Cross-Origin Resource Sharing) или потребовать учета Политики Безопасности Содержимого (CSP).

Знание среды

Понимание того, что GitHub не является оптимальной площадкой для хостинга сырого JavaScript, поможет избежать конфликтов с браузером. Использование подходящего стороннего сервиса обеспечит безопасную работу.

Полезные материалы

1. <script>: Элемент Script — разъяснение принципов подключения внешнего JavaScript-скрипта.
2. Переход с GitHub на jsDelivr — использование GitHub как CDN.
3. <script>: Элемент Script с атрибутами async и defer.
4. Cross-Origin Resource Sharing (CORS) — понимание проблем безопасности, связанных с CORS.
5. Политика Безопасности Содержимого (CSP) — описание CSP и его влияния на загрузку внешних скриптов.
6. GitHub Pages — инструкция по созданию и размещению страниц на GitHub.
7. Подключение и выполнение внешнего JavaScript-файла, размещенного на GitHub – Stack Overflow — обсуждение возможных вариантов решения.
8. Модули JavaScript — описание ES-модулей и принципов их использования.