javascript - requirejs使用r.js打包后，设置paths:'empty:'的模块无法通过paths引入

问题描述

问 题

场景：因为r.js会将main.js所有的依赖都打包成一个文件，导致打包后的main.js体积过大，我想将公共模块抽离，然后单独打包。
顺其自然我设置了vendor:'empty:'，让r.js忽略了vendor模块，然后我想既然原来的模块中还有require.config的配置，那么应该也可以通过paths:{vendor:'assets/js/vendor'}来引入vendor模块的啊，但是发现报错了，就算我设置了vendor模块的name，打印vendor还是undefined;
具体代码在：gulp-config

这是r.js的配置

module.exports = {
    baseUrl:'./dist',
    paths:{
        // vendor:'assets/js/vendor',
        vendor:'empty:',
        template:'assets/libs/arttemplate',
        CONFIG:'assets/js/config',
        API:'assets/js/service',
        jquery:'assets/libs/jquery/dist/jquery.min',
        bootstrap:'assets/libs/bootstrap/dist/js/bootstrap.min',
        owlcarousel:'assets/libs/owl.carousel/dist/owl.carousel.min',
        q:'assets/libs/q/q',
        evt:'home/js/index',
        plus:'sign/js/index'
    },
    shim:{
        bootstrap:{
            deps:['jquery'],
            exports:'bootstrap'
        },
        owlcarousel:{
            deps:['jquery'],
            exports:'owlcarousel'
        }
    }
}

然后通过gulp-requirejs-optimize来打包了各个页面main.js的依赖，当然已经忽略了vendor.js了

但是最后，main.js的其中的依赖文件无法通过require.config中的paths设置来引入vendor，打包后的代码如下：

define("evt", [], function() {
    var e = function(e, t, n) {
        e.addEventListener(t, n, !1)
    };
    return e
}), define("CONFIG", [], function() {
    var e = "http://api.bestsamcn.me/api",
        t = "http://api.bestsamcn.me/public/img",
        n = "http://api.bestsamcn.me/public/face";
    return {
        ROOT_API: e,
        POSTER_URL: t,
        FACE_URL: n
    }
}), require.config({
    baseUrl: "/",
    paths: {
        //r.js打包后，如果忽略了vendor，就不能通过require.config来引入vendor了吗？
        vendor: "assets/js/vendor",
        CONFIG: "assets/js/config"
    }
}), define("API", ["vendor", "CONFIG"], function(e, t) {
    //这里开始无法获取到vendor模块的方法了
    var n = e.$,
        i = e.q,
        a = e.$$;
    n.support.cors = !0;
    var r = function(e, r, o, s) {
            var c = i.defer(),
                l = {
                    type: e || "get",
                    dataTypa: "json",
                    data: o,
                    xhrField: {
                        withGredentials: !0
                    },
                    url: t.ROOT_API + r,
                    beforeSend: function() {
                        s && console.log("isToast")
                    },
                    success: function(e) {
                        return 0 !== e.retCode ? s && a.alertInfo(e.msg || "未知错误") : void c.resolve(e)
                    },
                    error: function() {
                        a.alertInfo("异常")
                    }
                };
            return n.ajax(l), c.promise
        },
        o = {};
    return o.getArticleList = function(e) {
        return r("get", "/article/getList", e, !1)
    }, o.login = function(e) {
        return r("post", "/admin/login", e, !0)
    }, o.getDiffArticle = function(e) {
        return r("get", "/article/getDiffArticle", e, !1)
    }, o.getCommentList = function(e) {
        return r("get", "/comment/getList", e, !0)
    }, o
})
//...

如果不能抽离公共的模块，那么这个配置感觉很鸡肋啊？Any help?

解决方案

知道原因了，其实上面说的思路是没有错的，原来是因为我在最后处理多余文件夹的时候，删除了其中依赖的js，导致vendor无法拿到依赖，修改了build的删除配置即可，代码有点多，如下：

gulp.task('delrubbish', function(){
    //删除文件夹可以使用dist/folder
    return gulp.src(['dist/{rev,include}', 'dist/assets/img/sprite', 'dist/assets/css/**/*.css', 'dist/**/js/*.js',
        'dist/assets/js/*.js', 'dist/**/css/*.css', '!dist/assets/css/**/*-*.css', '!dist/assets/libs/**/*.css', '!dist/assets/js/vendor.js', '!dist/**/main-*-*.js', '!dist/assets/libs/**/*','!dist/**/main-*-*.css'])
    .pipe(vinylPaths(del))
})

类似rev,include,sprite，还有其他在合并之后的单独文件都删除了，留下vendor和libs还有main.js

这篇关于javascript - requirejs使用r.js打包后，设置paths:'empty:'的模块无法通过paths引入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！