javascript - 将多个库合并为一个库时无法使用库函数

Question

我尝试学习 gulp。我有一项任务是将所有 js 库合并为一个 lib.min.js

gulp.task("lib-js:build", function () {
    return gulp.src(templates[template].src.libsJs)
        .pipe(concat("libs.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest(templates[template].dist.js));
});

变量 templates[template].src.libsJs 是一个包含以下值的数组:

var templates = {
    balmy: {
        dist: {
            default: "templates/balmy/dist",
            html: "templates/balmy/dist/",
            js: "templates/balmy/dist/resources/js/",
            css: "templates/balmy/dist/resources/css/",
            fonts: "templates/balmy/dist/resources/fonts/",
            img: "templates/balmy/dist/resources/img/"
        },
        src: {
            html: "templates/balmy/*.html",
            js: "templates/balmy/resources/js/*.js",
            css: "templates/balmy/resources/css/balmy.css",
            fonts: "templates/balmy/resources/fonts/**/*.*",
            fontsCss: "templates/balmy/resources/css/fonts.css",
            img: "templates/balmy/resources/img/**/*.*",
            libsJs: [
                "lib/jquery/v3.1.1/jquery-3.1.1.min.js",
                "lib/jquery-easing/v1.3/jquery.easing.min.js",
                "lib/bootstrap/v4.0.0-alpha.6/bootstrap.min.js",
                "lib/magnific-popup/v1.1.0/magnific-popup.js",
                "lib/owl-carousel/v2.2.1/owl.carousel.min.js",
                "lib/bootstrap-multiselect/bootstrap-multiselect.min.js",
                "lib/bootstrap-multiselect/bootstrap-multiselect-collapsible-groups.min.js",
                "lib/viewportchecker/v1.8.7/viewportchecker.min.js"
            ],
            libsCss: [
                "lib/owl-carousel/v2.2.1/owl.carousel.min.css",
                "lib/owl-carousel/v2.2.1/owl.theme.default.min.css",
                "lib/animation/v3.5.1/animate.min.css",
                "lib/magnific-popup/v1.1.0/magnific-popup.css",
                "lib/bootstrap-multiselect/bootstrap-multiselect.min.css"
            ]
        },
        needBootstrap: true
    }
}

其中 templates 是描述所有可能站点模板的变量。当我执行时:

gulp build --template balmy

我还使用我想要构建的模板名称设置了参数。

之后我将这个 js 文件包含到我的 html 中并尝试使用猫头鹰轮播功能:

<script src="resources/js/libs.min.js"></script>

<script>
    $(document).ready(function () {

        $(".all-events-carousel").owlCarousel({
            loop: true,
            margin: 10,
            items: 1,
            animateOut: 'slideOutDown',
            animateIn: 'flipInX',
            autoplay: true
        })
    });
</script>

这段代码靠近正文底部。在浏览器控制台中，我看到下一个异常:

但是如果从 html 中删除一个 concat js 并添加所有连接的 js 文件，它将正常工作。

这是结果 libs.min.js它只连接并且没有缩小(没有调用 uglify)

也许有人知道为什么会这样？

Answer 1

在已经缩小的文件上运行 uglify 插件通常不是一个好习惯。我可以看到您提到的大多数 JavaScript 文件已经缩小。

一般来说，缩小可以潜在地移除暴露的功能。

请尝试从链中删除 uglify 调用，看看是否可行。