Require.js & jQuery UI

Require.js очень хорошинй инструмент, позволяет собирать сайты любой сложности на FE и BE (через grunt-contrib-requirejs), но прежде чем что-то сделать приходиться иногда поломать голову.

Задание стояло примерно следующее: cайт подргужает jQuery UI через Require.js и на некоторых страницах использует selectmenu, который должен быть модифицирован.


$.ui.selectmenu.prototype.options.open = function () {
    console.log("open");
};

Понятно что его нельзя загружать на любой странице, а нужно поставить в зависимость от jQuery UI и загружать после загрузки selectmenu иначе он ругнется на отсутствие переменной. Для этого я написал вот такой конфиг для Require.js:


requirejs.config({
    map: {
        "jquery.config": {
            "jquery": "jquery"
        },
        "jquery-ui/selectmenu.config": {
            "jquery-ui/selectmenu": "jquery-ui/selectmenu"
        },
        "*": {
            "jquery": "jquery.config"
            "jquery-ui/selectmenu": "jquery-ui/selectmenu.config"
        }
    },
    paths: {
        "jquery": ".../jquery",
        "jquery.config": ".../jquery.config",
        "jquery-ui": ".../jquery-ui/ui",
        "jquery-ui/selectmenu.config": ".../selectmenu.config"
    }
});

и немного изменил код selectmenu.config.js, сделав его модулем


define(["jquery-ui/selectmenu"], function (selectmenu) {
    selectmenu.prototype.options.open = function () {
        console.log("open");
    };
    return selectmenu;
});

в примере также есть jquery.config.js, который выглядит вот так


define(["jquery"], function (jquery) {
    return jquery.noConflict(true);
});

а это код для сборки через grunt-contrib-requirejs


grunt.initConfig({
    requirejs: {
        app: {
            options: {
                baseUrl: "assets/js",
                name: "app",
                out: "dist/js/app.min.js",
                optimize: "uglify2",
                preserveLicenseComments: false,
                generateSourceMaps: true,
                paths: {
                    "jquery": "empty:",
                    "jquery-ui": "empty:"
                }
            }
        }
    }
});