mardi 1 mai 2018

AMD modules don't see libraries

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