[英]r.js optimizer - building an all inclusive js with some modules, and some shims
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. 但是,由于加载的某些.js是填充程序,因此它无法正常工作,在控制台中没有JavaScript错误,似乎没有任何执行。
testRjs.js file 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 module: 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
}]
});
});
Building like this: 像这样的建筑:
node r.js -o testRjs.js
节点r.js -o testRjs.js
Including in HTML like this: 像这样在HTML中包括:
<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? 顺便说一句,chronicnodes.js文件没有任何东西嵌套在$(document).ready()中,这可能是一个问题吗?
Help is appreciated. 感谢帮助。
You should review your use of shim
. 您应该检查对
shim
的使用。
For instance moment-timezone
calls define
, as you can see here : 例如
moment-timezone
调用define
,您可以在这里看到:
if (typeof define === 'function' && define.amd) {
define(['moment'], factory); // AMD
}
So it does not need a shim
. 因此它不需要
shim
。 Using a shim with code that calls define
leads to undefined behavior. 将填充程序与调用
define
代码一起使用会导致未定义的行为。 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. 因此,在此处不需要
moment-timezone
的时差shim
不会在优化之前引起问题,而在优化之后引起问题就不足为奇了。
Another thing you should check is whether there is any module that uses a shim
that needs to have an exports
option. 您应该检查的另一件事是,是否有使用
shim
模块需要exports
选项。 Some of the modules you use clearly do not need an exports
. 您显然使用的某些模块不需要
exports
。 For instance, Bootstrap installs itself a jQuery plugins rather than declare symbols in the global space. 例如,Bootstrap会自行安装一个jQuery插件,而不是在全局空间中声明符号。 However, other modules you use may need
exports
. 但是,您使用的其他模块可能需要
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. (我不熟悉您使用的所有模块,所以我不确定。)如果没有
wrapShim: true
您可能会丢失丢失的exports
但是启用此选项后,丢失的exports
将导致您的代码失败。 This is not an issue for non-optimized code. 对于未优化的代码,这不是问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.