无法加载jQuery插件时使用requirejs& r.js优化器 [英] Unable to load jQuery plugins when using requirejs & r.js optimizer
问题描述
我对我的requirejs优化器有点麻烦。在我运行优化器，我得到一些错误消息在我的构建/编译文件。当运行我的web应用程序没有优化步骤我没有任何错误。
这是我的client.js文件（包含配置）（coffeescript）
requirejs.config
baseUrl：'/ source /'
路径：
text：'lib /
io：'lib / socket.io'
下划线：'lib / underscore'
骨干：'lib / backbone'
jquery：'lib / jquery'
＃almond：'lib / almond'
bootstrap：'lib / bootstrap'
bootstrapFileUpload：'lib / bootstrap-fileupload'
jqueryUniform：'lib / jquery.uniform'
jqueryBrowser ：'lib / jquery.browser'
datatables：'lib / jquery.dataTables'
datatables_bootstrap：'lib / DT_bootstrap'
shim：
io：
exports： 'io'
jquery：
export：'jQuery'
jqueryBrowser：
deps：['jquery']
jqueryUniform：
deps：['jqueryBrowser '，'jquery']
下划线：
exports：'_'
backbone：
deps：['underscore'，'jquery']
exports： '
datatables_bootstrap：
deps：['jquery'，'datatables']
datatables：
deps：['jquery']
$ b b require ['routers / router'，'backbone']，（Router，Backbone） - >
MainRouter = new Router（）
Backbone.history.start（）
这里是我的优化器的配置。我需要'requirejs'作为模块，从nodejs运行优化器。
config =
baseUrl：__dirname + /../client/source'
name：'lib / almond'
include：'./client'
optimize：'none'
out：__dirname +'/。 ./client/'+ hash +'.js'
路径：
text：'lib / text'
io：'lib / socket.io'
下划线：'lib / underscore'
backbone：'lib / backbone'
jquery：'lib / jquery'
bootstrap：'lib / bootstrap'
bootstrapFileUpload：'lib / bootstrap-fileupload'
jqueryUniform：'lib / jquery.uniform'
jqueryBrowser：'lib / jquery.browser'
datatables：'lib / jquery.dataTables'
datatables_bootstrap：'lib / DT_bootstrap'
shim：
bootstrap：
exports：'bootstrap'
bootstrapFileUpload：
exports：'bootstrapUpload'
io：
exports：'io'
jquery：
export：'jQuery'
jqueryBrowser：
deps：['jquery']
jqueryUniform：
deps：['jqueryBrowser' jquery']
下划线：
exports：'_'
backbone：
deps：['underscore'，'jquery']
exports：'Backbone'
datatables：
deps：['jquery']
datatables_bootstrap：
deps：['jquery'，'datatables']
requirejs.optimize config，（buildResponse） - >
js = true
如果js&& css
require'./server'
，（err） - >
console.log'requirejs err'
console.log err
错误我在chrome中看到是：
未捕获TypeError：无法读取未定义的属性默认值
与此代码段相关：
/ *设置DataTable初始化的默认值* /
$ .extend（true，$ .fn.dataTable.defaults，{
有什么想法可能会出问题吗？谢谢！
我遇到了同样的问题。我认为这个错误发生的原因是因为 DT_bootstrap.js 不是AMD模块而这取决于一个的副作用。在这种情况下 jquery.dataTables.js 。
当RequireJS优化器将您引用的所有模块合并到一个大型JS文件中，原始 DT_bootstrap.js 位于其中间某处， jquery.dataTables .js 。问题是，当加载组合的js文件时，会立即计算 DT_bootstrap.js 。它需要在遇到行时定义 $。fn.dataTable ：
$。extend（true，$ .fn.dataTable.defaults，{
c $ c> jquery.dataTables.js 是一个AMD模块，它已经被编译但是还没有被评估，只有在以后的代码中，它需要作为一个依赖，它将被评估，定义 $。fn.dataTable 。
我通过将'DT_bootstrap.js'定义，就像这样： https://github.com/amdjs/backbone/blob /master/backbone.js#L8-L24
例如：
（function（root，factory）{
//为环境正确设置DT_bootstrap
if（typeof define ==='function'&& define.amd） {
// AMD
define（['jquery'，'datatables'，'bootstrap']，function（$）{
factory
}）;
} else {
//浏览器全局变量
factory（root.jQuery）;
}
}（this，function（$）{
//< --- original DT_bootstrap.js here here
}））
它解决了我的问题。
I'm having a bit of trouble with my the requirejs optimizer. After I run the optimizer, I get a few error messages in my build/compiled file. When running my web application without the optimize step I do not have any errors.
This is my client.js file (contains config) (coffeescript)
requirejs.config
baseUrl: '/source/'
paths:
text: 'lib/text'
io: 'lib/socket.io'
underscore: 'lib/underscore'
backbone: 'lib/backbone'
jquery: 'lib/jquery'
# almond: 'lib/almond'
bootstrap: 'lib/bootstrap'
bootstrapFileUpload: 'lib/bootstrap-fileupload'
jqueryUniform: 'lib/jquery.uniform'
jqueryBrowser: 'lib/jquery.browser'
datatables: 'lib/jquery.dataTables'
datatables_bootstrap: 'lib/DT_bootstrap'
shim:
io:
exports: 'io'
jquery:
exports: 'jQuery'
jqueryBrowser:
deps: ['jquery']
jqueryUniform:
deps: ['jqueryBrowser', 'jquery']
underscore:
exports: '_'
backbone:
deps: ['underscore', 'jquery']
exports: 'Backbone'
datatables_bootstrap:
deps: ['jquery', 'datatables']
datatables:
deps: ['jquery']
require ['routers/router', 'backbone'], (Router, Backbone) ->
MainRouter = new Router()
Backbone.history.start()
And here is my config for the optimizer. I run the optimizer from nodejs after requiring 'requirejs' as a module.
config =
baseUrl: __dirname + '/../client/source'
name: 'lib/almond'
include: './client'
optimize: 'none'
out: __dirname + '/../client/' + hash + '.js'
paths:
text: 'lib/text'
io: 'lib/socket.io'
underscore: 'lib/underscore'
backbone: 'lib/backbone'
jquery: 'lib/jquery'
bootstrap: 'lib/bootstrap'
bootstrapFileUpload: 'lib/bootstrap-fileupload'
jqueryUniform: 'lib/jquery.uniform'
jqueryBrowser: 'lib/jquery.browser'
datatables: 'lib/jquery.dataTables'
datatables_bootstrap: 'lib/DT_bootstrap'
shim:
bootstrap:
exports: 'bootstrap'
bootstrapFileUpload:
exports: 'bootstrapUpload'
io:
exports: 'io'
jquery:
exports: 'jQuery'
jqueryBrowser:
deps: ['jquery']
jqueryUniform:
deps: ['jqueryBrowser', 'jquery']
underscore:
exports: '_'
backbone:
deps: ['underscore', 'jquery']
exports: 'Backbone'
datatables:
deps: ['jquery']
datatables_bootstrap:
deps: ['jquery', 'datatables']
requirejs.optimize config, (buildResponse) ->
js = true
if js && css
require './server'
, (err) ->
console.log 'requirejs err'
console.log err
The specific error I'm seeing in chrome is: "Uncaught TypeError: Cannot read property 'defaults' of undefined"
Which correlates to this snippet:
/* Set the defaults for DataTables initialisation */
$.extend( true, $.fn.dataTable.defaults, {
Any idea what might be going wrong? Thanks!
I encountered the same issue. I think the reason this error occurs is because DT_bootstrap.js is not a AMD module while it depends on the side effects of one. In this case jquery.dataTables.js.
When RequireJS optimizer combines all the modules you reference into one big JS file, the raw DT_bootstrap.js is somewhere in the middle of it, some place after jquery.dataTables.js. The problem is that DT_bootstrap.js is evaluated immediately when your combined js file is loaded. It wants $.fn.dataTable to be defined when it encounters the line:
$.extend( true, $.fn.dataTable.defaults, {
Since jquery.dataTables.js is a AMD module it has been compiled but not evaluated yet. Only in later code where it is required as a dependency will it be evaluated, and only then will it define $.fn.dataTable.
I worked around this by wrapping 'DT_bootstrap.js' in a AMD module definition, like is done here: https://github.com/amdjs/backbone/blob/master/backbone.js#L8-L24
For example:
(function(root, factory) {
// Set up DT_bootstrap appropriately for the environment.
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery', 'datatables', 'bootstrap'], function($) {
factory($);
});
} else {
// Browser globals
factory(root.jQuery);
}
}(this, function($) {
// <--- original DT_bootstrap.js goes here
}));
It solved the issue for me.
这篇关于无法加载jQuery插件时使用requirejs& r.js优化器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
