无法加载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屋!