r.js优化器-构建一个包含一些模块和垫片的全包js

Question

当所有脚本都单独加载时，一切都像符咒一样工作。我现在正在尝试优化。

然而，因为加载的一些.js是垫片，所以它不起作用，控制台中没有JavaScript错误，看起来没有任何东西在执行。

testRjs.js文件

({
    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模块：

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
        }]
    });
});

像这样的建筑：

node r.js-o testRjs.js

包含在HTML中，如下所示：

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

顺便说一句，chronicnodes.js文件没有在$（document）.ready（）中嵌套任何内容，这可能是个问题吗？

感谢您的帮助。

Answer 1

您应该检查一下shim的使用情况。

例如，moment-timezone调用define，如您所见：

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

因此它不需要shim。使用带有调用define的代码的填充程序会导致未定义的行为。有时它没有效果，但有时它会引发问题。因此，对于moment-timezone来说，不必要的shim在优化之前不会引起问题，而是在优化之后引起问题，这并不特别令人惊讶。

您应该检查的另一件事是，是否有任何使用shim的模块需要具有exports选项。您使用的某些模块显然不需要exports。例如，Bootstrap为自己安装了一个jQuery插件，而不是在全局空间中声明符号。但是，您使用的其他模块可能需要exports。（我对您使用的所有模块都不熟悉，所以我不确定。）如果没有wrapShim: true，您可能会丢失exports，但如果打开此选项，丢失exports将导致代码失败。对于未优化的代码来说，这不是问题。