Перенос js в отдельный файл

102

11 июля 2021, 18:30

Есть код, который рекомендуется вставлять инлайн:

<script>
(function () {
    window.wpnConfig = {
        push_url: 'https://partikat.com/76567.js',
        utm_source: 'og',
        utm_campaign: 4075,
        utm_content: '______',
        domain: window.location.host,
        proto: window.location.protocol,        
        shadow_color: 'rgba(0,0,0,0.8)',
        shadow_cross: 1,
        shadow_arrow: 1,
        shadow_title: 'Нажмите на кнопку "Разрешить", чтобы подписаться на уведомления',
    };
    var s = document.createElement("script");
    s.setAttribute("async", 1);
    s.setAttribute("data-cfasync", false);
    s.src = window.wpnConfig.push_url;
    document.head && document.head.appendChild(s)
})();

Есть необходимость вынести скрипт в отдельный файл. Убираю <script> и </script>. Вставляю код в отдельный файл js. Но в консоли видна ошибка:

Почему возникает ошибка? Как правильно перенести скрипт в отдельный файл?

Answer 1

Уберите <script> и </script>

В подключаемых файлах содержится только код самого скрипта, без обрамления тегами <script> и </script>.

Да, и смотрите очередность/место подключения.

Upd по комменту:

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

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

Если не jQuery, но есть определенная последовательность формирования необходимых данных (переменных, отрабатывания на момент срабатывания построения DOM и прочее) - то этот порядок тоже соблюдается.

Как правило, оптимальнее включать js перед закрывающим тегом body.

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