Как правильно подключить скрипт при сборке Вебпаком?

Question

[romaro]

Написал учебный скрипт который должен обрабатывать форму на странице. Во время отладки код находился после тега body и все работало. Затем перенес скрипт в отдельный файл и добавил его в импорты. Предварительно подключил Babel, т.к. у меня возникала ошибка при попытке собрать проект (обработчик ругался на наличие класса).

После сборки скрипт попадает в бандл, который подключается до тега body:

<script defer src="../bundle.js"></script><link href="../style.css" rel="stylesheet"></head>

При этом я оставил вызов данного скрипта внизу страницы:

... Код страницы ...
</footer>
    <script>
        // regForm —это название формы, для которой инициализирую класс, который содержит обработчики. На странице, теоретически, может быть несколько форм.
        const regForm = new FormHandler('reg-form');
        regForm.init();
    </script>
</body>

Теперь, после загрузки страницы, получаю ошибку "FormHandler is not defined".

Если я правильно понимаю, дело не только в том, что скрипт нужно подключить после тега body? Проблема так же связана с тем, что обработчик формы инициализируется в обход Babel?

Как все-таки подключать подобные скрипты, которые могут создавать несколько экземпляров класса на странице?

Answer 1

[Сергей delphinpro]

Дело не в бабеле, и не в вебпаке.
https://learn.javascript.ru/script-async-defer

Comments

[romaro]

Спасибо за подсказку! Я вынес скрипт с инициализацией хендлера в отдельный файл и добавил директиву defer. Если я помещаю оба скрипта перед закрывающим тегом body, то все работает:

...
    <script defer src='../FormHandler.js'></script>
    <script defer src='../signupPageScript.js'></script>
</body>

Однако когда я переношу FormHandler в bundle.js (который находится до открывающего тега body) то снова получаю ошибку, что класс обработчика формы, который я пытаюсь вызвать в signupPageScript.js, не определен.

Правильно ли я понимаю, что мне теперь нужно настроить webpack таким образом, чтобы класс FormHandler добавлялся бы не в bundle.js, а в отдельный файл, который подключался бы перед закрывающим тегом body?

[Сергей delphinpro]

romaro, А зачем вы бандл сверху размещаете? Все скрипты вниз и без defer.

Однако проблема еще может быть в ограничении области видимости.
Если класс объявлен в модуле, то он виден только в модуле. Или в тех модулях, куда он импортируется.
Чтобы он стал доступен глобально, его следует разместить в объекте window.

window.FormHandler = FormHandler; // в бандле

Это выглядит довольно коряво, но должно работать.

Правильнее, наверное, не писать скрипты отдельно, а собирать их все в один бандл. Если нужно некий код разделить постранично, то использовать штатный code splitting вебпака.

[romaro]

Сергей delphinpro, еще раз спасибо. С модульностью вроде разобрался. Добавление класса FormHandler к window действительно помогло.

Но хочется разобраться, как все-таки работать со скриптами, которые вызываются с определенных страниц за счет прописанных в html-коде идентификаторов. Дело в том, что у меня названия форм фигурирует в css-классах. Например:
<form class="reg-form">

Я вижу два варианта:

Первый, это тот, который вы предложили: экспортировать класс в глобальный объект window, а вызов скрипта (создание экземпляров класса для обработки каждой формы) делать вручную с нужных страниц.

Второй вариант, по сути, оптимизирует первый. В этом случае я создаю обработчик, который помещается в бандл и после загрузки DOM ищет теги form, получает из классов идентификаторы форм и создает экземпляры FormHandler. Получается мини-фреймворк для работы с формами.

Вот насколько это направление верно с точки зрение архитектуры? Или вы бы посоветовали копнуть в другом направлении?

[Сергей delphinpro]

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

Answer 2

[Егор Данченко]

Лучше используйте HtmlWebpackPlugin, который автоматизирует подключение скриптов и стилей за вас. Хороший Webpack config - это минимум ваших действий.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: path.resolve(__dirname, 'src/scripts/example.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/index.html'),
      // Скрипты, которые нужно подключить к странице
      chunks: ['index'],
      // Логика загрузки
      scriptLoading: 'blocking | defer'
    })
  ],
};

Comments

[antonov2504]

Егор Данченко
Добрый день!
Наткнулся на ваши советы по настройке конфигурации webpack. Правильно понимаю, что в строке опечатка:
scriptLoading: 'blocking | defer'
и предполагалось:
scriptLoading: 'blocking'
для подключения тегов script в конце тега body?

Документация webpack
https://github.com/jantimon/html-webpack-plugin#options
подсказывает про inject:

true || 'head' || 'body' || false Inject all assets into the given template or templateContent. When passing 'body' all javascript resources will be placed at the bottom of the body element. 'head' will place the scripts in the head element. Passing true will add it to the head/body depending on the scriptLoading option. Passing false will disable automatic injections. - see the inject:false example

Т.е. если не указать inject, будет назначено значение по умолчанию true. В этом случае местоположение подключения скрипта будет зависеть от scriptLoading:

scriptLoading: 'blocking' // подключение в конце head
scriptLoading: 'defer' // подключение в конце body 
scriptLoading: 'module' // подключение в конце head, будет добавлен атрибут type="module"