Всем доброго времени суток!
Уважаемые знатоки, подскажите почему может меняться состав скрипта и как этого избежать?
Подробнее о проблеме:
В src/js создаю файл
datepicker.js - в этот файл кидаю содержимое js из файла air-datepicker.js папки dist, скаченного архива (качал тут:
https://github.com/t1m0n/air-datepicker).
Так же подключаю css.
По итогу CSS подключен, JS подключен (и там и там код читается)
Собственно проблема в том, что при запуске проекта из datepicker.js пропадает средство выбора даты AirDatepicker (ошибка: Uncaught ReferenceError: AirDatepicker is not defined)
Для наглядности прилагаю две ссылки на кодепен, что бы можно было наглядно посмотреть на то что было и то что стало.
1) Стало: НЕ рабочий вариант ( средство выбора даты AirDatepicker (ошибка: Uncaught ReferenceError: AirDatepicker is not defined) содержимое файла datepicker.js ):
https://codepen.io/boulingist81/pen/xbKYLeW
2)Было: Рабочий вариант (ни чего не удалено из js) содержимое файла air-datepicker.js
https://codepen.io/boulingist81/pen/NPKyvmG
С другими js файлами такой проблемы нет (вроде бы).
Не понимаю, на каком этапе происходит изменение в js и почему это происходит.
Ну и разумеется как с этим бороться...
Верстаю через gulp.
Через webpack.config.js меняется имя js
task webpack:
gulp.task('js:dev', function () {
return gulp
.src('./src/js/*.js')
.pipe(changed('./build/js/'))
.pipe(plumber(plumberNotify('JS')))
// .pipe(babel())
.pipe(webpack(require('./../webpack.config.js')))
.pipe(gulp.dest('./build/js/'));
});
Содержимое webpack.config.js :
const config = {
mode: 'production',
entry: {
jquery: './src/js/jquery.js',
owlCarusel: './src/js/owl.carousel.min.js',
owlSettings: './src/js/owlSettings.js',
select: './src/js/select.js',
datepicker: './src/js/air-datepicker.js',
airdatepicker_settings: './src/js/airdatepicker_settings.js',
count: './src/js/count.js',
index: './src/js/index.js',
tabs: './src/js/tabs.js',
subscribe: './src/js/subscribe.js',
},
output: {
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
module.exports = config;
На выходе получаю такой файл:
datepicker.bundle.js
В HTML файле подключаю обычным образом: