I use Gulp for making up a project and RequireJS for AMD modules. Here is some code from gulpfile.js (libs.min.js includes libraries):
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'));
});
Scripts included in html:
<!-- Some code -->
<script src="scripts/libs.min.js"></script>
<script data-main="scripts/config_require.min.js" src="scripts/lib/require.js"></script>
</body>
</html>
For example, I use some Bootstrap method in my module:
define(['jquery'], function ($) {
var modals = {};
modals.initModals = function() {
$('#carouselExampleFade').carousel();
};
return modals;
});
In a file which includes modules I call my function:
define(['jquery', 'modals'], function ($, modals) {
/*Some code*/
modals.initModals();
});
As a result I have the following error in a console: "$(...).carousel is not a function". I have the same error with other plugins and frameworks (except jQuery). Does it mean that modules don't see the libraries? Or it's because of Gulp? Because if I include scripts separately in html the error disappears:
<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();
});
Aucun commentaire:
Enregistrer un commentaire