UPD: проблема решилась неожиданным для меня способом: в файле модуля splider.js нужно было убрать обёртку вокруг кода
document.addEventListener( 'DOMContentLoaded', function () {
после импорта библиотеки. И всё заработало! Правда, не понимаю почему.
Всем привет! Сделал сборку gulp + webpack. Точка входа единственная - index.js, который подключается на все html-страницы. В index.js импортируются другие модули. Хочу сделать, чтобы нужные модули импортировались в зависимости от страницы, которая загружена.
На сайте есть библиотека splidejs только для главной страницы. Она инициализируется и кастомизируется в модуле splider.js, который потом импортируется в index.js. Если импортировать без условий, всё отлично работает:
import './splider';
import './music';
Но вот так не работает, при этом ошибок в консоли нет:
const page = document.querySelector(‘body’).className.split(‘-’).pop();
switch(page) {
case ‘index’: import(‘./splider.js’);
break;
case ‘music’: import(‘./music.js’);
break;
}
Конфиг вебпака выглядит так:
import path from "path";
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default {
entry: path.resolve(__dirname, "source/js/index.js"),
mode: process.env.NODE_ENV ? 'production' : 'development',
devtool: process.env.NODE_ENV ? false : "source-map",
target: ['web', 'es5'],
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: '@splidejs',
chunks: 'all',
},
},
},
},
};
Подключаемый splider.js модуль выглядит так, именно в него подключается библиотека splidejs:
import Splide from '@splidejs/splide';
document.addEventListener( 'DOMContentLoaded', function () {
const main = new Splide( '.js-main-splider', {
type : 'fade',
autoplay : 'play',
rewind : true,
.........
Подозреваю, что дело в том, что библиотека splidejs грузится дольше, чем дальнейший код инициализации слайдера, но как это поправить - не соображу. Прошу помощи!