Условно включите JS скрипт в html

Question

Я делаю простой сайт, размещенный на Github Pages, и использую CDN для включения нескольких файлов скриптов:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>

Во время разработки на локальном компьютере иногда бывает полезно включить полные версии сценариев для упрощения отладки, но на целевом сервере я бы предпочел использовать уменьшенные сценарии, то есть включать angular.min.js вместо angular.js. Есть ли способ включить «условное включение» в html или Github Pages имеют какой-то механизм для замены частей последних отправленных файлов?

Answer 1

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

...
{% if jekyll.environment == "production" %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...

---

Другой вариант предлагает использовать другой файл конфигурации специально для разработки.

_config.yml комплекты environment: prod.

_config_dev.yml комплектов environment: dev.

Запустив jekyll build --config _config.yml,_config_dev.yml в разработке, второй конфигурационный файл переопределяет первый и задает для среды dev. GitHub Pages запускается jekyll build - в нем используется только _config.yml - и для среды будет установлено значение prod. Вы можете использовать синтаксис, аналогичный приведенному выше, чтобы условно включить файл.

...
{% if site.environment == "prod" %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...