r.js optimizer - building an all inclusive js with some modules, and some shims

Question

When all the scripts are loaded individually, everything works like a charm. I am now trying to optimize.

However, because some of the .js loaded are shims, it just doesn't work, no JavaScript errors in the console, it just doesn't seem like anything is executing.

testRjs.js file

({
    baseUrl: "./dist/",
    paths: {
        "requireLib": "./require",
        "app": "./app",
        "main": "./main",
        "jquery": "./jquery-2.1.4",
        "jqbsace": "./jqbsace",
        "datatables": "./jquery.dataTables",
        "moment": "./moment",
        "momentTZ": "./moment-timezone",
        "momentDF": "./moment-duration-format",
        "datarangepicker": "./daterangepicker/daterangepicker",
        "highstock": "./highstock",
        "bootstrap": "./bootstrap",
        "aceconcat": "./aceconcat",
        "jstz": "./jstz-1.0.4.min",
        "shared": "./controllers/shared1",
        // Controller modules
        "casnodes/chronicnodes": "./controllers/casnodes/chronicnodes"
    },
    shim: {
        "datarangepicker": ["jquery"],
        "highstock": ["jquery"],
        "jstz": {
            exports: "jstz"
        },
        "bootstrap": ["jquery"],
        "aceconcat": ["bootstrap"],
        "momentTZ": ["moment"],
        "momentDF": ["moment"]
    },
    name: "casnodes/chronicnodes",
    out: "chronicnodesTest.js",
    wrapShim: true,
    include: ["requireLib"]
})

chronicnodes module:

define(["jquery", "datatables", "highstock", "moment", "datarangepicker", "aceconcat"], function($) {

    $('#allChronicView').DataTable({
        ajax: {
            url: ajaxUrl
        },
        dom: 'Bfrtip',
        buttons: [{
                extend: 'excel',
                text: 'Export (Excel)'
            },

            {
                extend: 'csv',
                text: 'Export (CSV)'
            },

            {
                extend: 'pdf',
                text: 'Export (PDF)'
            }
        ],
        'columns': [{
            'type': 'num',
            'data': 'NodeId',
            render: function(data, type, row) {
                return '<a id="http://shield?id=' + data + '" onclick="return false;"> ' + data + ' </a>'
            }
        }, {
            'data': 'Name'
        }, {
            'data': 'Alias'
        }, {
            'type': 'string'
        }, {
            'type': 'string'
        }, {
            'type': 'date',
            'data': 'DateQuery'
        }, {
            'type': 'num',
            'data': 'Condition'
        }, {
            'type': 'num',
            'data': 'TimeSecLastCondition'
        }, {
            'type': 'num',
            'data': 'Occur'
        }, ],
        "columnDefs": [{
            "targets": 0,
            "visible": false
        }, {
            // The `data` parameter refers to the data for the cell (defined by the
            // `data` option, which defaults to the column being worked with, in
            // this case `data: 0`.
            "render": function(data, type, row) {
                var mDate = moment(data);
                return mDate.tz(jstz.determine().name()).format('M/D/YYYY HH:mm:ss z');
            },
            "targets": 5
        }, {
            "render": function(data, type, row) {
                var str = row["Name"].substring(3, 5);
                return str;
            },
            "targets": 3
        }, {
            "render": function(data, type, row) {
                var str = row["Name"].substring(5, 9);
                return str;
            },
            "targets": 4
        }]
    });
});

Building like this:

node r.js -o testRjs.js

Including in HTML like this:

<script>
        var ajaxUrl = '@Url.Content(url)';
</script>
<script src="~/Scripts/chronicnodesTest.js"></script>

On a side note, the chronicnodes.js file doesn't have anything everything nested in an $(document).ready(), could this be an issue?

Help is appreciated.

Answer 1

You should review your use of shim.

For instance moment-timezone calls define, as you can see here:

if (typeof define === 'function' && define.amd) {
    define(['moment'], factory);                 // AMD
}

So it does not need a shim. Using a shim with code that calls define leads to undefined behavior. Sometimes it has no effect, but sometimes it casues problems. So it is not especially surprising that here the needless shim for moment-timezone would not cause a problem prior to optimization but causes problems after.

Another thing you should check is whether there is any module that uses a shim that needs to have an exports option. Some of the modules you use clearly do not need an exports. For instance, Bootstrap installs itself a jQuery plugins rather than declare symbols in the global space. However, other modules you use may need exports. (I'm not familiar with all the modules you use so I don't know for sure.) Without wrapShim: true you could get away with a missing exports but with this option turned on, a missing exports will cause your code to fail. This is not an issue for non-optimized code.