Question

我使用Gulp构建项目，并使用RequireJS for 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中看到的那样，所有包含的模块的主要包含在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']);

因此，我在控制台中出现以下错误：＆＃34; $（...）。carousel不是函数＆＃34;。我与其他插件和框架（jQuery除外）有相同的错误。这是否意味着模块没有看到图书馆？或者是因为Gulp？因为如果我在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();
});

AMD模块没有看到库

0 个答案: