Модули AMD не видят библиотеки - PullRequest
Новая
       28

Модули AMD не видят библиотеки

0 голосов
/ 01 мая 2018

Я использую 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'));
});

gulp.task('common-js', function () {
var mainjs = gulp.src('app/scripts/modules/main.js')
    .pipe(concat('main.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('app/scripts/modules'));

var configjs = gulp.src('app/scripts/config_require.js')
    .pipe(concat('config_require.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('app/scripts'))
    .pipe(browserSync.reload({stream: true}))

});

Сценарии, включенные в 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>

Например, в моем модуле используется метод Bootstrap: 

define(['jquery'], function ($) {
var modals = {};

modals.initModals = function() {
    $('#carouselExampleFade').carousel();
};

return modals;
});

В файле, который включает модули (main.js), я вызываю свою функцию: 

define(['jquery', 'modals'], function ($, modals) {

/*Some code*/

modals.initModals();
});

Затем, как вы можете видеть в gulpfile.js, main со всеми включенными модулями включается в свою очередь в config_require.js: 

"use strict";

requirejs.config({
baseUrl: 'scripts',
paths: {
    jquery: 'lib/jquery-3.2.1.min',
    main: 'modules/main.min',
    modals: 'modules/modals'
    }
});

requirejs(['main']);

В результате у меня появляется следующая ошибка в консоли: «$ (...). Карусель не является функцией». У меня такая же ошибка с другими плагинами и фреймворками (кроме jQuery). Значит ли это, что модули не видят библиотеки? Или это из-за Гулпа? Потому что, если я включу скрипты отдельно в html, ошибка исчезнет: 

<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();
});
...