Использую Gulp для сборки проекта и RequireJS для сборки AMD модулей. Вот из gulpfile.js (библиотеки собираются в libs.min.js):
gulp.task('scripts', ['common-js'], function () {
return gulp.src([
'app/libs/jquery/dist/jquery.min.js',
'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js',
'app/libs/popper.js/dist/umd/popper.min.js',
'app/libs/bootstrap/dist/bootstrap.min.js',
'app/libs/font-awesome/svg-with-js/js/fontawesome-all.min.js'
])
.pipe(concat('libs.min.js'))
.pipe(uglify())
.pipe(gulp.dest('app/scripts'));
});
Вот как подключены скрипты в html:
<!-- Какой-то код -->
<script src="scripts/libs.min.js"></script>
<script data-main="scripts/config_require.min.js" src="scripts/lib/require.js"></script>
</body>
</html>
В одном из модулей использую, например, какую-нибудь функцию Bootstrap:
define(['jquery'], function ($) {
var modals = {};
modals.initModals = function() {
$('#carouselExampleFade').carousel();
};
return modals;
});
В файле, где подключаются модули вызываю свою функцию:
define(['jquery', 'modals'], function ($, modals) {
/*Какой-то код*/
modals.initModals();
});
В итоге в консоли получаю ошибку: "$(...).carousel is not a function". С другими библиотеками та же самая ошибка возникает. Значит ли это, что модули не видят библиотеки? Или дело в Gulp'e? Потому что если подключать все файлы отдельно, то ошибки не будет:
<script src="scripts/lib/jquery-3.2.1.min.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="scripts/test.js"></script>
//Test.js
$(document).ready(function () {
$('#carouselExampleFade').carousel();
});
Сборка персонального компьютера от Artline: умный выбор для современных пользователей